vue-router导航守卫

为什么使用导航守卫？

1.我们来考虑一个需求: 在一个SPA应用中, 如何改变网页的标题呢?

• 网页标题是通过<title>来显示的, 但是SPA只有一个固定的HTML, 切换不同的页面时, 标题并不会改变.
• 但是我们可以通过JavaScript来修改<title>的内容window.document.title = '新的标题'
• 那么在Vue项目中, 在哪里修改? 什么时候修改比较合适呢?

2.普通的修改方式:

• 我们比较容易想到的修改标题的位置是每一个路由对应的组件.vue文件中.
• 通过mounted声明周期函数, 执行对应的代码进行修改即可.
• 但是当页面比较多时, 这种方式不容易维护(因为需要在多个页面执行类似的代码).

3.使用导航守卫

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

全局守卫

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

// 后置钩子(hook)
router.afterEach((to, from) => {
  
})

注意： 前置守卫中的next()方法必须调用，否则路由将不会发生跳转。from为当前活跃路由，to为要跳转到的路由。

补充：
1.如果是后置钩子, 也就是afterEach, 不需要主动调用next()函数。
2.上面我们使用的导航守卫, 被称之为全局守卫.其他还有路由独享的守卫，组件内的守卫。
3.更多内容可以查看官网进行学习: vue-router