1. 路由模式
路由有两种模式，分别是hash模式（默认） 和 history模式
hash模式，使用的是锚链接的原理实现路由的跳转，这种方式兼容性非常好；缺点是路径带有#号，不够美观。
history模式，使用的是浏览器中内置的history对象实现路由的跳转，这种方式不兼容老版本的浏览器，刷新后会丢失路由信息。
在路由实例中mode属性来配置路由模式
const router = new VueRouter({
//hash
mode:"hash",
routes
})
2. 路由元信息
meta选项，用于配置路由的元信息，里面的内容是自定义的，用于配置路由的数据
{
path:'/',
name:'home',
meta:{
title:'首页'
},
// 路由组件懒加载
component:()=>import('../pages/Home.vue'),
}
前置守卫
to表示到哪
from表示从来自哪里
next()继续向下执行
router.beforeEach((to,from,next)=>{
//通常：在这里会做一些权限验证操作
}
后置守卫
router.afterEach((to,from)=>{
//更改每个页面的标题
document.title=to.meta.title
})
我们在前后守卫的to参数中可以获取到我们在meta中设置的值。
路由守卫我们通常来判断用户是否登录，是否满足条件访问指定的页面
3. nprogress加载进度条
安装
npm install nprogress
导入
// 导入nprogress
import NProgress from "nprogress";
// 导入nprogress的样式
import "nprogress/nprogress.css";
在前置守卫中开启加载进度条
开启loading
NProgress.start();
在后置守卫中关闭加载进度条
结束loading
NProgress.done();
4. 二级路由
//配置子路由信息
children:[
//手机订单路由
{
path:'phoneOrder',
name:'phoneOrder',
meta:{
title:'手机订单'
},
component:()=>import(/* webpackChunkName: "b" */'../pages/Order/PhoneOrder.vue')
}
]
5. 路由懒加载 和 路由分组懒加载
路由懒加载
component:()=>import('../pages/Home.vue')
路由懒加载,我们不采用import 组件名 from ' '方式来导入组件
采用一个方法返回一个组件路径
好处：提高首页的加载速度
路由缓存
keep-alive组件
keep-alive用于缓存路由组件，默认情况下会缓存打开的所有组件，如果需要指定缓存哪些组件，通过include属性指定。
<keep-alive :include="['newsGn','newsGj']">
<router-view></router-view>
</keep-alive>
:include属性是个数组的形式绑定，绑定的名称是每个组件中name的名称
路由组件特有的两个生命周期
当我们使用路由缓存时，我们在跳转页面的时候，每个页面的数据不会被清除，但是造的的影响是，使用路由缓存的组件，生命周期函数在页面跳转的时候，只会执行一次，比如created和mounted这个两个周期函数，这个时候我们会使用路由特有的两个生命周期函数
路由组件激活状态生命周期函数
activated(){}
路由组件失活状态生命周期函数
deactivated(){}
