目录
一、初识vue-router
1.什么是vue-router?
vue 的一个插件库，专门用来实现 SPA 应用
2.对SPA应用的理解
（1）. 单页 Web 应用（single page web application，SPA）。
（2）. 整个应用只有一个完整的页面。
（3）. 点击页面中的导航链接不会刷新页面，只会做页面的局部更新。
（4）. 数据需要通过ajax 请求获取。
3.对路由的理解
(1).什么是路由？
1. 一个路由就是一组映射关系（key - value）
2. key 为路径, value 可能是function 或component
(2).路由分类
1. 后端路由：
1) 理解：value 是function, 用于处理客户端提交的请求。
2) 工作过程：服务器接收到一个请求时, 根据请求路径找到匹配的函数
来处理请求, 返回响应数据。
2. 前端路由：
1) 理解：value 是component，用于展示页面内容。
2) 工作过程：当浏览器的路径改变时, 对应的组件就会显示。
二、路由的基本使用
1.安装vue-router,命令
npm i vue-router
2.应用插件
Vue.use(VueRouter)
3.编写router配置项
//该文件专门用于创建整个应用的路由器
import VueRouter from "vue-router";
//引入路由组件
import About from '../components/About'
import Home from '../components/Home'
//创建router实例对象，去管理一组一组的路由规则
const router = new VueRouter({
routes:[
{
path:'/about',
component:About
},
{
path:'/home',
component:Home
},
]
})
//暴露router
export default router4.实现切换
<!-- Vue中借助router-link标签实现路由的切换 -->
<router-link class="list-group-item" active-class="active" to="/about">About</router-link>
<router-link class="list-group-item" active-class="active" to="/home">Home</router-link>5.指定展示位置
<router-view></router-view> 6.几个注意点
1.路由组件通常存放在 pages 文件夹里，一般组件通常存放在 components 文件夹
2.通过切换，“隐藏”了的路由组件，默认是被销毁掉的，需要的时候再去挂载
3.每个组件都有自己的 $route 属性，里面存储着自己的路由信息
4.整个应用只有一个 router ,可以通过组件的 $router 属性获取到
三、多级路由（嵌套路由）
1.配置路由规则，使用children配置项
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/message">Message</router-link>