vue-router导航守卫

来学习一下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');

})