Vue路由钩子

前言

这几年一直在it行业里摸爬滚打，一路走来，不少总结了一些python行业里的高频面试，看到大部分初入行的新鲜血液，还在为各样的面试题答案或收录有各种困难问题

于是乎，我自己开发了一款面试宝典，希望能帮到大家，也希望有更多的Python新人真正加入从事到这个行业里，让python火不只是停留在广告上。

微信小程序搜索：Python面试宝典

或可关注原创个人博客：https://lienze.tech

也可关注微信公众号，不定时发送各类有趣猎奇的技术文章：Python编程学习

路由钩子

参考: https://router.vuejs.org/zh/

1. 导航被触发
2. 在失活的组件里调用离开守卫
3. 调用全局的 beforeEach 守卫
4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)
5. 在路由配置里调用 beforeEnter
6. 解析异步路由组件
7. 在被激活的组件里调用 beforeRouteEnter
8. 调用全局的 beforeResolve 守卫 (2.5+)
9. 导航被确认
10. 调用全局的 afterEach 钩子
11. 触发 DOM 更新
12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数

全局前置钩子

beforeEach(to, from, next)

添加一个全局的前置钩子函数，可以在Router对象初始化时，这样钩子方法会在路由切换开始时调用

调用发生在整个切换流水线之前。如果此钩子函数拒绝了切换，整个切换流水线根本就不会启动，想当于页面不会进行跳转

const router = new VueRouter({ ... })

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

export default router

to: 即将要进入的目标 路由对象
from: 当前导航正要离开的路由
next: 实际路由前进的控制方法，调用该方法将执行此次路由跳转，可以传入类似v-link类似的跳转选项参数

---

如果需要对某些需要用户验证的路由进行身份识别，那么可以像下面这样

router.beforeEach((to, from, next) => {
  if(to.meta.requiredAuth == true){ // 如果要进入的路由需要用户登陆
    if(window.localStorage.getItem('token')){ // 获取存储的 token
      next()
    } else{ // 没有获取到，则跳转到登陆页面
      next({
        path: '/login',
        query: toQuery,
      })
    }
  }else{
    next()
  }
})

全局后置钩子

在完成路由跳转后调用，无next参数改变接下来的前进路由

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

局部路由钩子

定义局部路由钩子，只需要在路由组件映射的位置编写即可，对某个路由映射生效

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Index,
      beforeEnter: (to, from, next) => {
        // 只对当前路由生效
      }
    }
  ]
})