vue3种路由守卫详解

vue路由守卫

1 什么是路由守卫

路由守卫就是路由跳转过程中的一些钩子函数 ,在路由跳转的时候,做一些判断或其它的操作。 类似于组件生命周期钩子函数 。

2 分类

1.全局路由守卫
  1. beforeEach(to, from, next) 全局前置守卫,路由跳转前触发
  2. beforeResolve(to, from, next) 全局解析守卫 在所有组件内守卫和异步路由组件被解析之后触发
  3. afterEach(to, from) 全局后置守卫,路由跳转完成后触发
2.路由独享守卫

beforeEnter(to,from,next) 路由对象单个路由配置 ,单个路由进入前触发

3.组件路由守卫
  1. beforeRouteEnter(to,from,next) 在组件生命周期beforeCreate阶段触发
  2. beforeRouteUpdadte(to,from,next) 当前路由改变时触发
  3. beforeRouteLeave(to,from,next) 导航离开该组件的对应路由时触发
4.参数

to: 即将要进入的目标路由对象

from: 即将要离开的路由对象

next(Function):是否可以进入某个具体路由,或者是某个具体路由的路径

3.详解

1.路由前置守卫 beforeEach(to, from, next)
const router = new VueRouter({ ... })

router.beforeEach((to, from, next) => {
  // ...
})

在路由跳转前触发,在实际项目中应用最多,主要是登陆验证和跳转权限判断

2.全局解析守卫 beforeResolve(to, from, next)
router.beforeResolve((to, from, next) => {
  // ...
})

类似于路由前置守卫 beforeEach(to, from, next),也是路由跳转前触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机:在 beforeEach(to, from, next)和组件内beforeRouteEnter(to, from, next)之后,afterEach(to, from)之前调用

3.全局后置守卫 afterEach(to, from, next)
router.afterEach((to, from) => {
  // ...
})

于路由前置守卫 beforeEach(to, from, next)相对,路由跳转后触发,但它是同时在所有组件内守卫和异步路由组件被解析之后触发的

调用时机:在 beforeEach(to, from, next)和组件内beforeResolve (to, from, next)之后, beforeRouteEnter(to, from)之前调用

4. 路由独享守卫 beforeEnter(to, from, next)
const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

于路由前置守卫 beforeEach(to, from, next)相同,但在beforeEach(to, from, next)后触发

5. 组件路由守卫 beforeRouteEnter(to, from, next)
const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 不能获取组件实例 
    // 因为当守卫执行前,组件实例还没被创建
  }

因为该守卫在组件创建之前阶段触发,那个时候组件还没有创建成功,所以这个守卫内不能使用this获取组件实例

调用时机:在全局守卫beforeEach(to, from, next)和独享守卫beforeEnter(to, from, next)之后,全局beforeResolve(to, from, next)和全局afterEach(to, from)之前调用

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

调用时机:在当前路由复用时

7. 组件路由守卫 beforeRouteLeave(to, from, next)
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例
  }
}

通常用来禁止用户在还未保存修改前突然离开

调用时机:导航离开该组件的对应路由时调用

4.完整的导航解析流程

1.触发进入其它路由
2.调用要离开路由的组件守卫beforeRouteLeave
3.调用全局的前置守卫beforeEach
4.在重用的组件里调用 beforeRouteUpdate
5.在路由配置里的单条路由调用 beforeEnter
6.解析异步路由组件
7.在将要进入的路由组件中调用beforeRouteEnter
8.调用全局的解析守卫beforeResolve
9.导航被确认
10.调用全局的后置钩子afterEach
11.触发 DOM 更新mounted
12.执行beforeRouteEnter守卫中传给 next的回调函数

参考链接

5.实际应用

router.beforeEach((to, from, next) => {
  NProgress.start(); // NProgress实现显示加载进度条效果
  console.log("routemgr to", to.path);
  if ("这里判断是不是开发环境") {
    //开发环境下,直接路由
    next();
  } else {
    if (to.path == "/login") {
      //登录页面
      session.set("isOpen", "ok");
      next();
    } else if ("这里判断如不是生产环境下录页面需要判断权限") {
      //非生产环境下
      next();
    } else {
      //非登录页面需要判断权限
      console.log("routemgr user", lu.userinfo);
      if (gadget.isEmptyObject(lu.userinfo)) {
        //首次打开页面的时候,不需要弹出错误页面提示,直接跳转至登录页面即可
        let ret = session.get("isOpen");
        if (ret == "ok") {
          //vuex用户信息判断,如果不存在,则重新登录
          MessageBox.alert("用户未登录,需要重新登录.", "错误", {
            confirmButtonText: "确定",
            type: "error",
          }).then(() => {
            console.log("重新登录");
            //next(`/procmgr/login?redirect=${to.path}`);
            next(`/login`);
            NProgress.done();
          });
        } else {
          next(`/login`);
          NProgress.done();
        }
      } else {
        //权限判断
      }
    }
  }
});

Vue Router官方文档

  • 32
    点赞
  • 120
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 4
    评论
Vue Router 提供了路由守卫来控制页面的访问权限。在 Vue 3 中,路由守卫的使用方式与 Vue 2 有一些不同。 在 Vue 3 中,我们可以使用 `beforeRouteEnter`、`beforeRouteUpdate` 和 `beforeRouteLeave` 这三个路由守卫来进行页面导航的控制。 - `beforeRouteEnter`:在进入路由之前调用,可以访问组件实例 (`this`),但是此时组件实例还未被创建,因此无法访问组件的实例属性和方法。 - `beforeRouteUpdate`:在当前路由改变,但是该组件被复用时调用,可以访问组件实例 (`this`),可以根据新的路由参数来更新组件数据。 - `beforeRouteLeave`:在离开当前路由之前调用,可以访问组件实例 (`this`),可以进行一些离开前的确认操作。 下面是一个使用路由守卫的示例: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const router = createRouter({ history: createWebHistory(), routes: [ { path: '/home', component: Home, beforeEnter: (to, from, next) => { // 在进入 /home 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } }, { path: '/profile', component: Profile, beforeEnter: (to, from, next) => { // 在进入 /profile 路由之前执行的逻辑 // 可以在这里进行权限判断等操作 next(); } } ] }); ``` 在上面的示例中,我们定义了两个路由 `/home` 和 `/profile`,并分别为它们设置了 `beforeEnter` 路由守卫。在 `beforeEnter` 中,我们可以根据需要进行权限判断等操作,并通过调用 `next()` 方法来继续导航。 注意,这里的示例只涉及到了全局前置守卫,还有其他类型的守卫,如组件内的守卫和全局后置守卫等。你可以根据具体需求选择使用不同类型的守卫来实现路由控制。
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

沉沦与遐想。

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值