vue路由 vue-router

到现在 vue项目同平常前端项目的最大区别就是：正常前端项目的跳转是不同.html文件之间的跳转，由<a>标签实现，但vue的正式项目一般都会只有一个.html文件，所有的展示都在这一个文件之中。

那如何实现这种一个页面内的跳转呢，那就需要使用路由（vue-router）

10.1、vue-router的理解

vue的一个插件库，专门用来实现SPA应用

10.2、对SPA应用的理解

1. 单页Web应用（single page web application, SPA）

2. 整个应用只有一个完整的页面

3. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新

4. 数据需要通过ajax请求获取

10.3、路由的理解

10.3.1、路由分类

1. 后端路由

   1. 理解：value是function，用于处理客户端提交的请求

   2. 工作过程：服务器接收到一个请求时，根据请求路径找到匹配的函数来处理请求，返回响应数据。

2. 前端路由

   1. 理解：value是component，用于展示页面内容

   2. 工作过程：当浏览器路径改变时，对应的组件就会显示

10.4、几个注意点

1.路由组件通常存放在pages文件夹，一般组件通常存放在components文件夹。

2.通过切换，“隐藏"了的路由组件，默认是被销毁掉的，需要的时候再去挂载。

3.每个组件都有自己的$route属性，里面存储着自己的路由信息。

4.整个应用只有一个router，可以通过组件的$router属性获取到。

10.5、嵌套（多级）路由

1、配置路由规则，使用children配置项

2、路由的配置文件一般命名为index.html 处于src目录下，与pages同级

routes : [
    {
        path : ' /about' ,
        component: About,
    },
    {
        path : ' / home ',
        component : Home,
        children: [ //通过children配置子级路由
            {
               path: 'news ',//此处一定不要写:/news
               component:News   
            },
            {
                path : 'message' ,//此处一定不要写:/message
                component:Message
            }
        ]
    }
]

2、跳转（要写完整路径）

<router-link to="/home/news">News</router-link>