vue-router的导航守卫

---

一、导航守卫

“导航”表示路由正在发生改变。vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

导航守卫有三种：

• 全局导航守卫
• 路由独享守卫
• 组件内的守卫

---

二、全局导航守卫

1、全局前置守卫

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

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

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

该守卫方法接收三个参数：

• to: Route，即将要进入的目标的路由对象

• from: Route，当前导航正要离开的路由对象

• next: Function，调用该方法后, 才能进入下一个钩子。next参数有比较多的用法，可以进入 导航守卫 | Vue Router 官网 详细学习

使用案例，我们可以利用beforeEach来完成页面标题的修改