vue路由导航守卫（全局守卫、路由独享守卫、组件内守卫）

一共有三种

第一种是全局守卫：

beforeEach 路由进入之前

这个是写在路由的里面的，只有进入这个路由才可以调用

afterEach 路由进入之后

全局后的钩子，钩子不会结束next函数也不会改变导航本身。

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

第二种 组件内守卫：

beforeRouteEnter 路由进入之前

beforeRouteUpdate 路由更新之前

beforeRouteLeave 路由离开之前

 beforeRouteEnter (to, from, next) {
    // 在渲染该组件的对应路由被 confirm 前调用
  },


  beforeRouteUpdate (to, from, next) {
    // 在当前路由改变，但是该组件被复用时调用
  },


  beforeRouteLeave (to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
  }

第三种：

独享守卫

beforeEnter 路由进入之前

有三个参数

to from next

router.beforeEach((to, from, next) => {
  // to当前要跳去的路由对象
  // form这是你要离开的路由对象
  // next结束参数，可以看做一个保安，想过去就得打招呼，不然不让你过。
});

 

author：ice Sea Love Rain