导航守卫

Posted 2021-03-04 landuo629

什么是导航守卫?

• vue-router提供的导航守卫主要用来监听监听路由的进入和离开的.
• vue-router提供了beforeEach和afterEach的钩子函数, 它们会在路由即将改变前和改变后触发.

我们可以利用beforeEach来完成标题的修改

• 首先, 我们可以在钩子当中定义一些标题, 可以利用meta来定义
  
• 其次, 利用导航守卫,修改我们的标题.

// 前置守卫(guard)
router.beforeEach((to, from, next) => {
  // 从 from 跳转到 to
  document.title = to.matched[0].meta.title
  next()
})

• 后置导航守卫的使用方法

// 后置钩子(hook)
router.afterEach((to, from) => {
//如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数.
})

导航钩子的三个参数解析

• to: 即将要进入的目标的路由对象.
• from: 当前导航即将要离开的路由对象.
• next: 调用该方法后, 才能进入下一个钩子.

导航守卫补充

• 上面我们使用的导航守卫, 被称之为全局守卫
  • 路由独享的守卫
    • 你可以在路由配置上直接定义 beforeEnter 守卫
    • 这些守卫与全局前置守卫的方法参数是一样的
  • 组件内的守卫
  • 更多内容, 可以查看官网
    • https://router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E8%B7%AF%E7%94%B1%E7%8B%AC%E4%BA%AB%E7%9A%84%E5%AE%88%E5%8D%AB