Router界面切换（四）导航守卫（导航控制）

前言

导航守卫主要用来通过跳转或取消的方式守卫导航。

使用router进行界面切换，我们可以通过守卫导航正在切换的界面（从哪儿来，到哪儿去），并且可以控制是否跳转或者重定向；

一、全局守卫

• 界面切换之前调用

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

• 界面切换之后调用

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

参数解析：

• from：正要离开的界面
• to：将要进入的界面
• next： 是一个函数，控制是否导航是否继续调整；

二、路由独享的守卫

可以直接在路由配置上定义导航守卫

export default new Router({
  routes: [
    ......
    {
      path: '/first',
      name: 'first',
      component: first,
      beforeEnter: (to, from, next) => {
        // 导航切换到first界面时，调用
        next()
      },
    },
  ]
})

三、组件内的守卫

可以再组件内部直接定义导航守卫；

• 组件显示之前调用

export default {
  name: "first",
  beforeRouteEnter(to, from, next) {
    // 此处组件的实例还未被创建，不能使用'this'
    next();
  },
};

在beforeRouteEnter使用this

beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      // 在这里，组件的create方法已经被调用过了
    })
  },

• 组件将要消失之前调用

export default {
  name: "first",
  beforeRouteLeave(to, from, next) {
    console.log("beforeRouteLeave");
    next();
  }
};