【愚公系列】《循序渐进Vue.js 3.x前端开发实践》060-Vue Router的路由导航守卫

标题详情
作者简介愚公搬代码
头衔华为云特约编辑,华为云云享专家,华为开发者专家,华为产品云测专家,CSDN博客专家,CSDN商业化专家,阿里云专家博主,阿里云签约作者,腾讯云优秀博主,腾讯云内容共创官,掘金优秀博主,亚马逊技领云博主,51CTO博客专家等。
近期荣誉2022年度博客之星TOP2,2023年度博客之星TOP2,2022年华为云十佳博主,2023年华为云十佳博主,2024年华为云十佳博主等。
博客内容.NET、Java、Python、Go、Node、前端、IOS、Android、鸿蒙、Linux、物联网、网络安全、大数据、人工智能、U3D游戏、小程序等相关领域知识。
欢迎👍点赞、✍评论、⭐收藏


🚀前言

在现代单页面应用(SPA)的开发中,确保用户体验的流畅性和安全性是至关重要的。而 Vue Router 作为 Vue.js 的官方路由管理工具,提供了强大的路由导航守卫功能,让我们能够在路由切换的不同阶段进行各种控制和处理。通过导航守卫,我们可以轻松地管理用户的访问权限、数据加载、路由跳转前的验证等,确保应用的稳定与安全。

本文将深入探讨 Vue Router 的路由导航守卫,包括全局守卫、路由独享守卫和组件内守卫的使用方法。我们将详细讲解每种守卫的作用、使用场景,并通过实际案例展示如何在路由切换前后进行各种逻辑处理。无论是保护敏感页面的访问,还是在切换路由前进行数据预取,导航守卫都能为我们的应用提供强有力的支持。

🚀一、Vue Router的路由导航守卫

在 Vue Router 中,导航守卫主要用于在路由跳转过程中,决定是否允许或阻止某次跳转。通过这些守卫,可以实现权限控制、数据加载等功能。

🔎1. 全局导航守卫

全局导航守卫是指在应用级别设置的守卫,所有路由的跳转都会经过这些守卫。常用的全局守卫有 beforeEach(前置守卫)和 afterEach(后置守卫)。

🦋1.1 定义全局前置导航守卫

通过 beforeEach 方法,可以为路由实例注册一个全局的前置守卫。每当发生路由跳转时,beforeEach 方法都会被触发。

示例代码:

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes // 我们定义的路由配置对象
});

router.beforeEach((to, from) => {
  // 将要跳转到的路由对象
  console.log(to);
  // 当前将要离开的路由对象
  console.log(from);

  // 返回 true 表示允许此次跳转,返回 false 表示禁止此次跳转
  return false; // 这样所有的路由跳转都会被禁止
});

在上面的代码中,beforeEach 方法的返回值可以是布尔值。如果返回 false,导航会被阻止。如果返回 true,导航会继续。如果返回的是一个路由配置对象,可以实现路由重定向。

例如,假设我们需要检查用户的登录状态,如果没有登录,则重定向到登录页面:

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

router.beforeEach((to, from) => {
  if (to.name !== 'setting') { // 如果不是跳转到 'setting' 路由
    return { name: 'setting', params: { id: '000' } }; // 重定向到 'setting' 路由
  }
});

🦋1.2 定义全局后置导航守卫

全局后置守卫 afterEach 允许你在导航完成后执行某些操作。与前置守卫不同,后置守卫不会影响导航的结果,它更多用于页面分析或监控。

示例代码:

const router = createRouter({
  history: createWebHashHistory(),
  routes: routes
});

router.afterEach((to, from, failure) => {
  console.log("跳转结束");
  console.log(to); // 当前跳转到的路由
  console.log(from); // 当前离开的路由
  console.log(failure); // 如果导航失败,记录失败原因
});

afterEach 中,除了接收 tofrom 参数外,还接收 failure 参数。failure 用于记录导航异常信息。

🔎2. 为特定路由注册导航守卫

除了全局守卫,还可以为特定的路由设置导航守卫。这些守卫只会在访问某些路由时触发。

🦋2.1 在路由配置中使用 beforeEnter

在路由配置中,可以使用 beforeEnter 属性来为特定的路由配置守卫。beforeEnter 只会在进入该路由时触发,而不会在路由参数变化时触发。

示例代码:

const routes = [
  {
    path: "/demo1",
    component: Demo,
    name: 'Demo',
    beforeEnter: (to, from) => {
      console.log("进入 '/demo1' 路由");
      return false; // 阻止跳转
    }
  }
];

在上述代码中,当用户访问 /demo1 路由时,beforeEnter 守卫会被触发,并且返回 false 阻止跳转。

🦋2.2 在组件中使用导航守卫

在组件内部,可以使用 onBeforeRouteUpdateonBeforeRouteLeaveonBeforeRouteEnter 来实现导航守卫。

  1. onBeforeRouteUpdate:当路由参数变化时(例如,通过 URL 改变参数),会触发该方法。
import { onBeforeRouteUpdate } from 'vue-router';

onBeforeRouteUpdate((to, from) => {
  console.log("路由参数更新时的守卫");
  console.log(to, from);
});
  1. onBeforeRouteLeave:当离开当前页面时触发。常用于提示用户是否保存数据。
import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave((to, from) => {
  console.log("离开当前页面时的守卫");
  console.log(to, from);
});
  1. onBeforeRouteEnter:在进入路由之前触发。需要注意的是,onBeforeRouteEnter 在组件实例尚未创建时就被调用,因此不能直接访问组件实例。
import { onBeforeRouteEnter } from 'vue-router';

onBeforeRouteEnter((to, from) => {
  console.log("进入当前页面时的守卫");
  console.log(to, from);
});

🔎3. Vue Router 导航流程总结

Vue Router 导航跳转的流程如下:

  1. 导航被触发:可以通过 router-linkpush 等方法或直接改变 URL 触发。
  2. 进入将要失活的组件:调用 beforeRouteLeave 守卫。
  3. 调用全局的 beforeEach 守卫。
  4. 如果当前组件没有变化:调用组件内部的 beforeRouteUpdate 守卫。
  5. 调用在路由配置中定义的 beforeEnter 守卫。
  6. 解析异步路由组件。
  7. 确认导航:完成路由跳转。
  8. 调用全局的 afterEach 守卫。
  9. 更新 DOM:页面内容更新,完成跳转。

通过上述流程,可以看到 Vue Router 在处理路由跳转时是非常灵活和可控的。你可以在不同阶段对导航进行拦截、重定向或执行其他逻辑。

🔎4.总结

  1. 全局导航守卫:beforeEach 用于前置守卫,afterEach 用于后置守卫。前置守卫决定是否允许跳转,后置守卫用于分析或监控跳转。
  2. 特定路由守卫:beforeEnter 可用于为特定路由注册守卫,onBeforeRouteUpdateonBeforeRouteLeave 适用于组件级别的守卫。
  3. 守卫流程:Vue Router 提供了一个完善的导航流程,你可以在每个阶段进行相应的操作。
### RVIZ2 中不支持立体视觉的原因 RVIZ2 主要用于可视化来自不同传感器的数据,包括激光雷达、摄像头等。然而,在当前版本中确实存在对立体视觉支持不足的情况[^2]。 原因主要在于: - **数据处理复杂度**:立体视觉涉及到两幅图像的同时处理与匹配计算,这对实时性能提出了更高要求。 - **API 设计差异**:ROS 2 的 API 虽然提供了丰富的功能接口来构建复杂的机器人应用系统,但对于特定类型的多目相机的支持还不够完善。 ### 解决方案 尽管官方默认情况下未直接提供针对立体视觉的良好集成体验,但仍有一些可行的方法可以实现这一需求: #### 方法一:自定义插件开发 通过创建自定义显示插件的方式扩展 RVIZ2 功能。这需要开发者熟悉 C++ 编程语言以及 ROS 2 插件机制,并能够调用 OpenCV 或其他计算机视觉库来进行双目视差图的生成和渲染。 ```cpp #include <rviz_common/display.hpp> // ... other necessary includes ... class StereoVisionDisplay : public rviz_common::Display { public: // Implement required methods and members here... }; ``` #### 方法二:利用第三方工具链 借助于像 `stereo_image_proc` 这样的包先对外部获取到的左右眼图片流做预处理得到深度信息后再输入给 RVIZ2 显示。这种方式不需要修改 RVIZ2 源码本身,相对简单易行一些。 ```bash ros2 run stereo_image_proc disparity stereo/left/image_raw stereo/right/image_raw ```
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

愚公搬代码

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

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

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

打赏作者

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

抵扣说明:

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

余额充值