这是我参与「第四届青训营」笔记创作活动的的第五天
今天来讲解下 Vue 路由剩下的相关的内容

编程式路由

声明式	编程式
`<router-link :to="...">`	`router.push(...)`

不借助<router-link>实现路由跳转，让路由跳转更加灵活，通过$router访问路由实例。
编程式路由分为push和replace两种方法具体代码为：

this.$router.push({
    name:'xx',
    params:{
        a:xx,
        b:xx
        }
    })
    
    
    
this.$router.replace({
    name:'xx',
    params:{
        a:xx,
        b:xx
        }
})

缓存路由组件

让展示的路由组件保持挂载，不被销毁

缓存一个组件
<keep-alive include="要缓存的组件名">
<router-view></router-view>
</keep-alive>
缓存多个组件
<keep-alive :include="['','']">
<router-view></router-view>
</keep-alive>

组件名指组件中的name 下图中的组件名是Detial

路由守卫

正如其名，vue-router 提供的路由守卫主要用来通过跳转或取消的方式守卫路由。这里有很多方式植入路由导航中：全局的，单个路由独享的，或者组件级的。

全局前置路由守卫

你可以使用 router.beforeEach 注册一个全局前置守卫：

const router = createRouter({ ... })

router.beforeEach((to, from,next) => {
  // ...
  // 返回 false 以取消导航
  return false
  next()
})

当一个导航触发时，全局前置守卫按照创建顺序调用。守卫是异步解析执行，此时导航在所有守卫 resolve 完之前一直处于等待中。
每个守卫有三个参数：

to: 即将要进入的目标
from: 当前导航正要离开的路由
next:进行路由跳转

全局后置路由守卫

你也可以注册全局后置路由守卫，然而和前置路由守卫不同的是，不会接受 next 函数也不会改变导航本身

router.afterEach((to, from) => {
  // ...
})

路由独享守卫

你可以直接在路由配置上定义 beforeEnter 守卫：

const routes = [
  {
    path: '/users/:id',
    component: UserDetails,
    beforeEnter: (to, from, next) => {
      // reject the navigation
      return false
    },
  },
]

组件内的守卫

组件内的路由守卫有beforeRouteEnter和beforeRouteLeave
通过路由规则进入该组件时会调用 beforeRouteEnter

  beforeRouteEnter(to, from) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
  },

通过路由规则离开该组件时会调用beforeRouteLeave

 beforeRouteLeave(to, from) {
    // 在导航离开渲染该组件的对应路由时调用
    // 与 `beforeRouteUpdate` 一样，它可以访问组件实例 `this`
  },

总结

本文提到了 Vue 路由中的编程式路由以及路由守卫的概念，并讲解了 Vue 中的三种路由守卫的概念和使用方法。

参考

Vue-Router 官方文档

前端笔记 -- Vue路由（三） | 青训营笔记