来学习一下vue的路由导航守卫

vue的路由导航守卫有三种:

  1、全局守卫

  2、路由组件内守卫

  3、路由独享守卫

下面来讲讲这三种导航守卫:

  1、全局守卫:

有三个钩子函数:
    router.beforeEach  全局前置守卫     进入路由之前

    router.beforeResolve  全局解析守卫(2.5版本后)在beforeRouteEnter调用之后调用

    router.afterEach  全局后置钩子   进入路由之后


使用方法:

//在main.js入口文件中写,也可以在路由js文件里写,就是下面那个引入路由那个文件中

// main.js 入口文件 import router from './router'; // 引入路由

router.beforeEach((to, from, next) => { next(); }); router.beforeResolve((to, from, next) => { next(); }); router.afterEach((to, from) => { console.log('afterEach 全局后置钩子');

  //在afterEach中没有next回周函数,要跳转导航怎么办?可以用router.push({name:'login'});//跳转login });

  2、路由组件内的守卫:

    

也有三个钩子函数:
    beforeRouteEnter  进入路由前

    beforeRouteUpdate  (2.2版本后) 路由得用同一个组件时,就是在同一个组件跳转,路径后带了不同的参数

    beforeRouteLeave  离开当前路由时



使用代码:
beforeRouteEnter (to, from, next) {

// 在路由独享守卫后调用 不!能!获取组件实例 `this`,组件实例还没被创建

},


beforeRouteUpdate (to, from, next) {

// 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 `this`
// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,
// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

},


beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用,可以访问组件实例 `this`

}

  3、路由独享守卫:

    

就是为某个路由单独配置守卫,写到某个路由配置中:
使用函数:beforeEnter


代码使用例子:
const router = new VueRouter({
     routes: [
     {
          path: '/foo',
          component: Foo,
          beforeEnter: (to, from, next) => {
          // 参数用法什么的都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖
          // ...
          }
     }
    ]
})

还有:当我们在使用路由守卫钩子函数时,函数中发生错误,可以这样捕获:

router.onError(callback => {

    console.log(callback, 'callback');

})

  

01-04 11:05