安装vue-router：
vue2用vue-router3版本：
npm i vue-router@3vue3用vue-router4版本：
npm i vue-router@4创建一个router文件夹，在该文件夹中创建一个index.js文件
该文件专门用于创建整个应用的路由器。
在main.js中引入并应用vue-router
Vue中借助router-link标签实现路由的切换
用于替换原始html中的a标签，用to代替a标签中的href，此处要写完整路径，用active-class=”active”体现当前点击标签高亮效果，例：
使用router-view标签表示指定组件的呈现位置
几个注意事项
路由组件通常存放在单独的文件夹pages中，一般组件通常存放在components组件中
通过切换，“隐藏”了的路由组件，默认是被销毁的，需要的时候再去挂载。
每个组件都有自己的$route属性，里面存储着自己的路由信息。
整个应用只有一个router，可以通过组件的$router属性获取到。
嵌套路由（多级路由）
通过children配置子路由，只有一级路由中path要用“/”。
路由的query参数
（传递参数）
跳转路由并携带query参数，to的字符串写法：
<router-link :to="`/home/message/detail?id=${m.id}&title=${m.title}`">{
{m.title}}</router-link>跳转路由并携带query参数，to的对象写法：
<router-link :to="{
path:'/home/message/detail',
query:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>（接收参数）
$route.query.id $route.query.title命名路由
路由的params参数
（传递参数）
跳转路由并携带params参数，to的字符串写法：
<router-link :to="`/home/message/detail/${m.id}/${m.title}`">{
{m.title}}</router-link>跳转路由并携带params参数，to的对象写法，此时不能用path，只能用name
<router-link :to="{
name:'xiangqing',
params:{
id:m.id,
title:m.title
}
}">
{
{m.title}}
</router-link>（路由配置）
（接收参数）
$route.params.id$route.params.title路由的props配置
props的第一种写法，值为对象，该对象中的所有key-value都会以props的形式传给Detail组件（用的少，值为死数据）
传递（写在index中）：
props:{a:1,b:'hello'}接收（写在Detail的script中）：
props:['a','b']props的第二种写法，值为布尔值，若布尔值为真，就会把该路由组件收到的所有params参数，以props的形式传给Detail组件
传递（写在index中）：
props:true接收（写在Detail的script中）：
props:['id','title']props的第三种写法，值为函数
传递（写在index中）：
props($route){
return {id:$route.query.id,title:$route.query.title}
}接收（写在Detail的script中）：
props:['id','title']router-link的replace属性
开启replace模式：
<router-link replace class="list-group-item" active-class="active" to="/home">Home</router-link>作用：控制路由跳转是操作浏览器历史记录的模式。
浏览器历史记录有两种写入方式：分别为push和replace，push是追加历史记录，replace是替换当前记录。默认为push。
编程式路由导航
重写push
//先把VueRouter原型对象的push保存一份
let originPush = VueRouter.prototype.push;
//重写push
VueRouter.prototype.push = function (location,resolve,reject) {
if(resolve && reject){
originPush.call(this,location,resolve,reject);
}else{
originPush.call(this,location,()=>{},()=>{});
}
}重写replace
//先把VueRouter原型对象的replace保存一份
let originReplace = VueRouter.prototype.replace;
//重写replace
VueRouter.prototype.replace = function (location,resolve,reject) {
if(resolve && reject){
originReplace.call(this,location,resolve,reject);
}else{
originReplace.call(this,()=>{},()=>{});
}
}第一个参数：告诉原来push方法，你往哪里跳转（传递哪些参数）
第二个参数：成功回调
第三个参数：失败回调
call||apply区别
相同点：都可以调用函数一次，都可以篡改函数的上下文一次
不同点：call与apply传递参数：call传递参数用逗号隔开，apply方法执行，传递数组
通过重写push和replace使得之后用push和replace进行编程时路由导航时多次点击不会报错
缓存路由组件
keep-alive让不展示的路由组件保持挂载，不被销毁，include设置控制哪个组件，里面放的是组件名。
缓存多个路由组件：
<keep-alive :include="['News','Message']">缓存一个路由组件：
<keep-alive include="News">
<router-view></router-view>
</keep-alive>两个新的生命周期钩子
作用：路由组件所独有的两个钩子，用于捕获路由组件的激活状态。
activated：路由组件被激活时触发
deactivated：路由组件失活时触发
路由守卫
不能瞬间暴露路由器，要接住路由器的实例对象，即：
const router = new VueRouter暴露之前加一个路由守卫，最后再暴露路由器：
export default routermeta：路由元信息，可放一些想放的特殊数据，例：
meta:{isAuth:true,title:'新闻'}全局前置路由守卫--初始化时执行、每次路由切换之前执行
全局后置路由守卫--初始化时执行、每次路由切换之后执行
独享路由守卫，某一个路由所独有的（只有前置，没有后置）
组件内路由守卫
beforeRouteEnter进入守卫：通过路由规则，进入该组件时被调用
beforeRouteLeave离开守卫：通过路由规则，离开该组件时被调用
history模式和hash模式
#及后面的内容就是hash值，hash值不会包含在HTTP请求中，即：hash值不会带给服务器。
hash模式：地址中永远带着#号，不美观，若以后将地址通过第三方手机app分享，若app校验严格，则地址会被标记为不合法。兼容性较好。
history模式：地址干净、美观，兼容性和hash模式相比略差，应用部署上线时需要后端人员支持，解决刷新页面服务端404问题。
通过mode配置两种模式：
mode:'history'mode:'hash'