路由进阶

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(){}