现在很多网页应用都是SPA（单页应用，只有一个真实页面）
点击路由链接不对后台发请求，只更新显示不同的路由组件
路由器管理路由，路由本质是映射关系（键值对）。后台路由的k-v是path-处理请求的回调函数，前端的k-v是path-路由组件（其实就是组件）
一、准备工作
npm install vue-router --save
src下建一个router文件夹，下有main.js，在这里对外暴露一个路由对象
src下建一个pages或views文件夹，专门放路由组件（非路由组件在components）
二、配置路由器
在router的main.js中
import Vue from 'vue' //因为是vue所以要先引用vue
import VueRouter from 'vue-router'
Vue.use(VueRouter)
//内部定义并注册了2个组件标签(router-link/router-view),
//给组件对象添加了2个属性:
//1. $router: 路由器 2. $route: 当前路由
export default new VueRouter（{}）
三、配置路由
在router的main.js中
import 路由组件（路由组件写好放views/pages文件夹中），在VueRouter中配置选项
routes: [
{ // 一般路由
path: '/about',
component: About，
children：[ //嵌套路由
{ path: 'news', component: News },
{paht:''，reditect:'/about/news'}
]
},
{ // 自动跳转路由，初始化界面
path: '/',
redirect: '/about'
}
]
四、注册路由器
在src下的main中
import router from './router'
new Vue({
router：router
})
五、 使用路由组件标签
1. <router-link>: 用来生成路由链接
<router-link to="/xxx">Go to XXX</router-link>
<router-link to="/home/news">News</router-link>(嵌套路由)
2. <router-view>: 用来显示当前路由组件界面
<router-view></router-view>
六、缓存路由组件对象
默认情况下, 被切换的路由组件对象会死亡释放, 再次回来时是重新创建的
<keep-alive>
<router-view></router-view>
</keep-alive>
不让它死亡
七、路由组件传递数据的方式
方式 1: 路由路径携带参数(param/query)
param：
1) 配置路由
children: [
{
path: 'mdetail/:id',
component: MessageDetail
}
]
2) 路由路径
<router-link :to="`/home/message/detail/'${message.id}`">{{message.title}}</router-link>
波浪号同键的`号
3) 路由组件中读取请求参数
this.$route.params.id
query：
1) 配置路由
children: [
{
path: 'detail',
component: MessageDetail
}
]
2) 路由路径
<router-link :to="'/home/message/mdetail?id='+m.id">{{m.title}}</router-link>
3) 路由组件中读取请求参数
this.$route.query.id
方式 2: <router-view>属性携带数据
<router-view :msg="msg"></router-view>
然后在组件里还是用props接
八、编程式路由导航
1) this.$router.push(path): 相当于点击路由链接(可以回退)
2) this.$router.replace(path): 用新路由替换当前路由(不可以正确回退到上一个界面，是到上上个)
3) this.$router.back(): 请求(返回)上一个记录路由
4) this.$router.go(-1): 请求(返回)上一个记录路由
5) this.$router.go(1): 请求下一个记录路由
<div>
<ul>
<li v-for="m in messages" :key="m.id">
<router-link :to="`/home/message/detail/${m.id}`">{{m.title}}</router-link>
<button @click="pushShow(m.id)">push查看</button>
<button @click="replaceShow(m.id)">replace查看</button>
</li>
</ul>
<button @click="$router.back()">回退</button>
<hr>
<router-view></router-view>
</div>
九、tip
当路由被选中时，会被加上router-link-active样式
