路由守卫

一、分类
(1)全局守卫
  • router.beforeEach 全局前置守卫 进入路由之前

  • router.beforeResolve 全局解析守卫(2.5.0+) 在beforeRouteEnter调用之后调用

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

(2)路由独享守卫
  • beforeEnter

(3)路由组件内的守卫
  • beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this,组件实例还没被创建

  • beforeRouteUpdate路由复用同一个组件时, 在当前路由改变,但是该组件被复用时调用 可以访问组件实例 this

  • beforeRouteLeave离开当前路由时, 导航离开该组件的对应路由时调用,可以访问组件实例 this

二、返回参数

to、from、next    字面上我们就可以大概猜到这三个参数的含义,到哪去、从哪来,前 进。

三、使用

处理登录的逻辑

当我们全局挂载路由守卫的时候,如果根据 token的存在去作为判断,可以完成大多数的login登录逻辑

router.beforeEach((to, from, next) => {
// 路由守卫在路由将要发生改变时触发,这时如果存在token,就让路由往下执行
    if (token) {
        next();
    } else {
        next({
            path: '/pages/login/login'
        });
    }
})    

 

posted @ 2023-06-14 10:52  有只小菜猫  阅读(113)  评论(0)    收藏  举报