1.什么是导航守卫

vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。通俗点讲就是一个拦截器


2.导航守卫分类


全局守卫

beforeEach(全局前置)、beforeResolve(全局解析)、afterEach(全局后置)

在路由实例对象注册使用,写在main.js中

代码举例(结合sessionStorage实现登录拦截):

router.beforeEach( (to,from,next) => {
    console.log('-----全局前置守卫.');
    let path = to.path;
    console.log("--------path = "+path);
    let ckLogin = false; // 检查是否登录
    if( sessionStorage.getItem("userinfo") ){
        ckLogin = true;
    }
    //
    if( true ){
        next(); // 放行
    }else{
        next("/login");
    }
    
} );

路由守卫

beforeEnter(在路由配置项中项定义,写在路由js中

代码举例(只拦截固定的路径):

{
    path: '/test4',
    name: 'Test4',
    component: () => import('../views/test4.vue'),
    beforeEnter:(to,from,next) => {
        console.log("-----路由守卫 test4");
        next();
    }    
  }

组件守卫

beforeRouteEnter(进入vue页面)、beforeRouteUpdate(vue页面修改)、beforeRouteLeave(vue页面离开)

在组件属性中定义,写在vue页面中

代码举例(离开vue页面时提示):

    export default {
        name: 'Test6',
        data () {
            return {
              key: '测试-路由6',
              id:0,
              title:''
            }
        },
        beforeRouteLeave(to,from,next){ // 组件守卫-离开组件
            let ck  = confirm('是否离开?');
            if(ck){
                next();// 放行
            }else{
                next(false) ; // 拦住
            }
        }
    }

3. 参数解释

具体

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。
next(): 进行管道中的下一个钩子。如果全部钩子执行完了,则导航的状态就是 confirmed (确认的)。
next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮),那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或者 next({ path: '/' }), 
next({ name: 'login', params: { path: route.path } }): 跳转到一个不同的地址。当前的导航被中断,然后进行一个新的导航。

注意

全局后置守卫(afterEach),是没有 next 的,因为到这以及完全结束没法跳了。

02-23 02:29