Vue2路由导航守卫

1、什么是路由导航守卫

    可以理解为保安,符合条件就能进,不符合不能进

    场景:进入某一个页面,前置性需要判断身份(是否登录),如果登录可以进入,如果没有就不可以,并跳转到登录页。

2、全局导航守卫

    1)、router.beforeEach 注册一个全局前置守卫

    2)、router.beforeResolve 注册一个全局解析守卫

    3)、全局后置钩子

    有三个,不过一般使用第一个全局前置、而且全局导航守卫用的不多,因为每次路由跳转都会判断,浪费性能,一般用在一些app必须登录才能查看的需求上。

3、路由独享导航守卫(一般使用这个)

{
    path: '/vip',
    component: () => import('@/views/Vip.vue'),
    beforeEnter: (to, from, next) => {
        //这里就比如判断是否登录
        if (true) {
            next()  //放行
        } else {
            next('/login')  //跳转到对应页面
        }
    }
}

4、组件内导航守卫

        就是在目标路由组件内写条件,判断能不能进来,跟路由独享差不多,只是书写方式不一样。

        某组件内

beforeRouteEnter(to, from,next) {
    // 在渲染该组件的对应路由被验证前调用
    // 不能获取组件实例 `this` ！
    // 因为当守卫执行时，组件实例还没被创建！
    //这里就比如判断是否登录
    if (true) {
        next()  //放行
    } else {
        next('/login')  //跳转到对应页面
    }
},