当前位置：首页 > news >正文

Vue Router动态路由与导航守卫实战

news 来源：原创 2025/7/4 12:18:30

在 Vue Router 中，动态路由与导航守卫的结合使用能够实现复杂的路由控制逻辑，例如权限验证、动态路由加载、数据预取等功能。以下是一个结合实战的详细说明：

一、动态路由基础

动态路由通过路径参数（:）实现动态匹配，常用于根据参数渲染不同内容：

// router.js
const routes = [{path: '/user/:id',name: 'User',component: UserProfile,props: true // 推荐：通过 props 解耦参数}
];

组件中获取参数

<!-- UserProfile.vue -->
<template><div>User ID: {{ userId }}</div>
</template><script>
export default {props: ['id'], // 通过 props 接收参数computed: {userId() {return this.id;}}
}
</script>

二、导航守卫核心用法

导航守卫分为全局守卫、路由独享守卫和组件内守卫。

1. 全局前置守卫 (`beforeEach`)

用于全局权限验证或路由拦截：

// router.js
router.beforeEach((to, from, next) => {const isAuthenticated = checkAuth(); // 假设的验证函数if (to.meta.requiresAuth && !isAuthenticated) {next({ name: 'Login' }); // 重定向到登录页} else {next(); // 放行}
});

2. 路由独享守卫 (`beforeEnter`)

针对特定路由的验证：

// router.js
{path: '/admin',component: AdminPanel,beforeEnter: (to, from, next) => {if (user.role !== 'admin') next('/403'); // 权限不足跳转else next();}
}

3. 组件内守卫 (`beforeRouteEnter`, `beforeRouteUpdate`)

beforeRouteEnter: 进入组件前调用（无法访问 this）
beforeRouteUpdate: 路由参数变化但组件复用时调用

// UserProfile.vue
export default {beforeRouteEnter(to, from, next) {// 预取数据（例如通过 API）fetchUserData(to.params.id).then(user => {next(vm => vm.setUserData(user)); // 通过回调传递数据});},beforeRouteUpdate(to, from, next) {// 参数变化时重新获取数据this.fetchUserData(to.params.id);next();},methods: {setUserData(user) {this.user = user;}}
}

三、动态路由 + 导航守卫实战场景

场景 1：动态添加路由（基于权限）

根据用户角色动态生成可访问路由：

// 登录后动态添加路由
function setupRoutes(userRole) {const routes = generateRoutesBasedOnRole(userRole); // 生成动态路由routes.forEach(route => router.addRoute(route));// 添加后跳转到首页（需处理重复添加问题）router.replace({ path: '/' });
}// 全局守卫中处理未加载路由的情况
router.beforeEach((to, from, next) => {if (!router.hasRoute(to.name) && to.meta.fallbackPage) {next(to.meta.fallbackPage); // 跳转到备用页} else {next();}
});

场景 2：数据预加载

在进入路由前获取必要数据：

// 路由配置
{path: '/article/:slug',component: ArticleDetail,meta: { preload: true }
}// 全局守卫中预加载数据
router.beforeEach(async (to, from, next) => {if (to.meta.preload) {await store.dispatch('fetchArticle', to.params.slug);}next();
});

场景 3：滚动行为控制

结合 scrollBehavior 实现页面滚动位置管理：

// router.js
const router = new VueRouter({scrollBehavior(to, from, savedPosition) {if (savedPosition) {return savedPosition; // 浏览器前进/后退时恢复位置} else if (to.hash) {return { selector: to.hash }; // 处理锚点} else {return { x: 0, y: 0 }; // 默认顶部}}
});

四、常见问题与解决方案

1. 无限重定向循环

问题：守卫逻辑错误导致 next() 重复调用。
解决：确保守卫中有且仅有一次 next() 调用，避免重复跳转。

2. 动态路由刷新 404

问题：动态添加的路由在刷新后丢失。
解决：在应用初始化时（如 main.js）重新根据用户权限添加路由。

3. 异步守卫处理

问题：守卫中需要等待异步操作（如 API 请求）。
解决：使用 async/await 或返回 Promise：

beforeRouteEnter(to, from, next) {api.getData().then(data => {next(vm => vm.setData(data));});
}

五、最佳实践

路由元信息 (meta)：标记路由的权限、是否需要缓存等。

路由懒加载：提升应用性能。

component: () => import('./views/UserProfile.vue')

参数解耦：使用 props 代替直接访问 $route.params。

通过合理组合动态路由与导航守卫，可以实现高度灵活的路由控制，满足复杂业务场景需求。

Vue Router动态路由与导航守卫实战

在 Vue Router 中，动态路由与导航守卫的结合使用能够实现复杂的路由控制逻辑，例如权限验证、动态路由加载、数据预取等功能。以下是一个结合实战的详细说明： 一、动态路由基础动态路由通过路径参数（:）实现动态匹配&a…...

编程日记 2025/7/4 12:18:30

数据库健康监测器（BHM）实战：如何通过 HTML 报告识别潜在问题

在数据库运维中，健康监测是保障系统稳定性与性能的关键环节。通过 HTML 报告，开发者可以直观查看数据库的运行状态、资源使用情况与潜在风险。本文将围绕数据库健康监测器（Database Health Monitor, BHM）的核心功能展开分析，结合 Prometheus + Grafana + MySQL Export…...

编程日记 2025/7/4 11:21:50

Oracle基础知识(二)

目录 1.聚合函数 2.COUNT(1)&COUNT(*)&COUNT(字段)区别（面试常问） 3.分组聚合——group by 4.去重：DISTINCT 、GROUP BY 5.聚合函数的过滤HAVING 6.oracle中having与where的区别 (面试常问) 7.ROUND与TRUNC函数 8.ROLLUP上卷…...

编程日记 2025/7/4 9:36:57

轻量化MEC终端特点

MEC（多接入边缘计算）解决方案通过将计算能力下沉至网络边缘，结合5G网络特性，已在多个行业实现低延迟、高可靠、高安全的应用部署。以下从技术架构、核心优势及典型场景三方面进行总结： 一、技术架构分层设计‌ MEC架…...

编程日记 2025/7/3 23:57:53

Git 提交大文件 this exceeds GitHub‘s file size limit of 100.00 MB

报错核心： File …/encoder-epoch-99-avg-1.int8.onnx is 173.47 MB File …/encoder-epoch-99-avg-1.onnx is 314.79 MB this exceeds GitHub’s file size limit of 100.00 MB 正确做法：使用 Git LFS 上传大文件 GitHub 对单个文件最大限制是 100MB&…...

编程日记 2025/7/4 9:22:25

前后端的双精度浮点数精度不一致问题解决方案，自定义Spring的消息转换器处理JSON转换

在 Java 中，Long 是一个 64 位的长整型，通常用于表示很大的整数。在后端，Long 类型的数据没有问题，因为 Java 本身使用的是 64 位的整数，可以表示的范围非常大。但是，在前端 JavaScript 中，Lo…...

编程日记 2025/7/3 15:26:57

C语言—Linux环境下CMake设置库（动态/静态）

1. Yesterday Once More 由于昨日我们在VSCode设置了如何使用CMake构建与编译c语言项目，如有疑问，请看以下链接，今日根据昨天的配置来进一步完成项目的构建。 c语言- 如何构建CMake项目（Linux/VSCode）-CSDN博客 2. 动态…...

编程日记 2025/7/4 10:36:18

C语言---内存函数

memcpy函数的使用及模拟实现 memcpy的功能和strcpy类似，都是用来拷贝数据的。与strcpy不同的是，memcpy的适用性更广并且是以字节为单位来拷贝的。 void * memcpy ( void * destination, const void * source, size_t num ) memcpy函数的作用就是拷贝从so…...

编程日记 2025/6/27 23:16:01

vue项目启动报错（node版本与Webpack）

一、问题因为项目需要将node版本从v14.17.0升级到v20.9.1了，然后启动项目报错报错有些多，直接省略部分 building 2/2 modules 0 activeError: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:79:19) …...

编程日记 2025/7/4 8:49:30

Vite + Vue 工程中，为什么需要关注 `postcss.config.ts`？

📜 前言：当传统 CSS 遇见现代工程在 Vue 项目开发中，CSS 管理一直是一个容易被忽视但极其重要的环节。传统的 CSS 编写方式（如手动处理浏览器兼容性、全局样式污染）已无法适应现代前端工程的需求。而 PostCSS 作为 C…...

编程日记 2025/7/4 9:14:08

LeetCode热题100：Java哈希表中等难度题目精解

49. 字母异位词分组题目描述给定一个字符串数组，要求将字母异位词组合在一起。可以按任意顺序返回结果列表。字母异位词是由重新排列源单词的所有字母得到的一个新单词。示例示例 1: 输入: strs ["eat", "tea", "tan", &…...

编程日记 2025/7/3 8:02:01

设计模式1 ——单例模式

定义在 C 里，单例模式是一种常用的设计模式，其目的是保证一个类仅存在一个实例，并且为该实例提供一个全局访问点。实现 1 饿汉式 class Singleton { private:static Singleton instance;Singleton() default;~Singleton() default;Si…...

编程日记 2025/6/27 2:10:31

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（26）：のは・のが・のを

日语学习-日语知识点小记-构建基础-JLPT-N4阶段（26）：のは　・　のが　・　のを 1、前言（1）情况说明（2）工程师的信仰2、知识点（1）復習：（２）のは　・　のが　・　のを3、单词（1）日语（2）日语片假名单词4、相近词练习5、单词辨析记录6、总结1、前言（1）情况说明…...

编程日记 2025/7/1 19:02:46

第18天-NumPy + Pandas + Matplotlib多维度直方图

示例1：带样式的柱状图 python 复制下载 import numpy as np import pandas as pd import matplotlib.pyplot as plt# 生成数据 df = pd.DataFrame(np.random.randint(10, 100, size=(8, 4)),columns=[Spring, Summer, Autumn, Winter],index=[2015, 2016, 2017, 2018, 20…...

编程日记 2025/7/2 18:01:29

Qt初识.

认识 QLabel 类，能够在界面上显示字符串. 通过 setText 来设置的。参数 QString (Qt 中把 C 里的很多容器类，进行了重新封装。历史原因) 内存泄露 / 文件资源泄露对象树. Qt 中通过对象树，来统一的释放界面的控件对象. Qt 还是推荐使用 new 的…...

编程日记 2025/7/3 10:15:55

linux系统查看硬盘序列号

Linux系统查看硬盘信息指南方法一：hdparm工具 sudo hdparm -i /dev/sda输出示例：在返回信息中查找"SerialNo"字段为序列号，"Model"字段为硬盘型号注意：必须使用root权限，普通用户需在命令前加s…...

编程日记 2025/6/27 23:21:04

用户栈的高效解析逻辑

一、背景在之前的博客内核逻辑里抓取用户栈的几种方法-CSDN博客里，介绍了使用内核逻辑进行用户栈的函数地址的抓取逻辑，但是并没有涉及如何解析出函数符号的逻辑。就如perf工具一样，它也是分为两个步骤，一个步骤是内核态抓取…...

编程日记 2025/6/27 23:12:14

【713. 乘积小于 K 的子数组】

Leetcode算法练习笔记记录 713. 乘积小于 K 的子数组 713. 乘积小于 K 的子数组此题和 209题什么区别，没有什么区别，关键时理解滑动窗口的作用。 public int numSubarrayProductLessThanK(int[] nums, int k) {if (k < 1){return 0;}int left 0;in…...

编程日记 2025/6/27 23:25:58

springboot 1.x2.x依赖spring版本

springboot 1.x&2.x依赖spring版本 Spring Boot 1.x 系列版本主要依赖于 Spring Framework 4.x。具体对应关系如下： Spring Boot 1.0.x → Spring Framework 4.0.xSpring Boot 1.1.x → Spring Framework 4.0.xSpring Boot 1.2.x → Spring Framework 4.1.xSp…...

编程日记 2025/7/2 4:54:33

TYUT-企业级开发教程-第9章

考点不多，不会考大题异步任务异步任务通常用于耗时较长或者不需要立即得到执行结果的业务，在 Spring 中，可以使用 Async 注解实现异步任务，被Async 注解标注的方法称之为异步方法，异步方法将在执行的时候&#xff…...

编程日记 2025/7/2 1:31:09

独占内存访问指令LDXR/STXR

一、原子操作的介绍在计算机领域里，如果要在多线程的情况下要保持数据的同步，需要引入称作Load-Link（LL）和Store-Conditional（SC）的操作，通常简称为LL/SC。 LL操作返回一个内存地址上当前存储…...

编程日记 2025/7/4 5:20:38

FlashAttention：传统自注意力（ Self-Attention）优化加速实现

摘要 FlashAttention 是一套专为 GPU 优化的精确自注意力（Self-Attention）实现，通过“输入/输出感知”（IO-awareness）和块化（Tiling）策略，利用片上 SRAM 缓存大幅降低对高带宽显存&…...

编程日记 2025/7/1 18:13:23

DSP定时器的计算

以下是 0 到 F 的十六进制数对应的四位二进制表示的对照表： 十六进制二进制00000100012001030011401005010160110701118100091001A1010B1011C1100D1101E1110F1111 定时器周期： 我们先将 0x1742 转换成二进制形式： 0x1742 0001 0111 0100 …...

编程日记 2025/6/27 2:24:53

2025.05.21华为暑期实习机考真题解析第二题

📌 点击直达笔试专栏 👉《大厂笔试突围》 💻 春秋招笔试突围在线OJ 👉 笔试突围OJ 02. 灾区物资调度路径规划问题描述在一次严重的自然灾害后，LYA负责协调救援物资的配送工作。救援区域包含多个受灾乡镇和一个物资集结点，各个地点之间的道路状况各异，有些甚至…...

编程日记 2025/7/2 16:43:55

ATT Global赞助非小号全球行，引领RWA创新浪潮

领先的Web3广告生态系统构建者Advertising Time Trace (ATT Global) 今日宣布，将作为特别赞助商，鼎力支持即将于2025年5月26日在吉隆坡盛大举行的非小号全球行之“You Deserve to be Loved” WALL X特别慈善活动。此次盛会由知名Web3平台非小号与WALL X、…...

编程日记 2025/6/27 21:44:05

在 stm32 中 volatile unsigned signed 分别有什么作用，分别在什么场景下使用？

在STM32开发中， plaintext 复制 volatile 、 plaintext 复制 unsigned 和 plaintext 复制 signed 是三个关键的关键字，它们的用途和场景如下： 1. plaintext 复制 volatile 关键字作用： 禁止编译器优化&#xff…...

编程日记 2025/7/2 1:19:44

Pandoc3.7新特性：存在合并单元格的 HTML 表格会被保留为嵌入的 HTML 表格

问题描述在 Pandoc 3.6 中，当将包含合并单元格的 HTML 表格 (<table>) 转换为 Markdown 格式时，表格会被直接转换为 Markdown 表格格式。然而，在 Pandoc 3.7 中，同样的操作结果发生了变化：合并单元格的 HTML 表…...

编程日记 2025/7/3 11:05:38

WPS深度适配鸿蒙电脑折叠形态，国产替代下的未来何在？

首先，从产业升级与国产替代的角度来看，这是中国信息技术产业由“可用”向“好用”跃迁的重要信号。长期以来，中国的办公软件市场高度依赖微软Office等国外产品，操作系统也主要被Windows、macOS等垄断。而随着鸿蒙系统的成熟以及WP…...

编程日记 2025/6/27 6:49:04

[java]数组

数组 Scanner innew Scanner(System.in); int[] numbersnew int[100]; int x; int cnt0; xin.nextInt(); while(x!-1){numbers[cnt]x;sumx;xin.nextInt(); } if(cnt>0){System.out.println(sum/cnt); }所有的元素具有相同的数据类型创建后不能改变大小定义数组元素个数…...

编程日记 2025/7/2 18:14:55

torch.matmul() VS torch.einsum()

torch.matmul():标准的矩阵乘法向量-向量（点积） a torch.randn(3) # [3] b torch.randn(3) # [3] c torch.matmul(a, b) # 点积，标量输出矩阵-向量 A torch.randn(3, 4) # [3, 4] x torch.randn(4) # [4] y torch.matmul(A, x…...

编程日记 2025/6/27 11:07:30

leetcode 92. Reverse Linked List II

题目描述 92. Reverse Linked List II 是第206题的进阶版206. Reverse Linked List 思路很简单，但一次性通过还是有点难度的。 /*** Definition for singly-linked list.* struct ListNode {* int val;* ListNode *next;* ListNode() : val(0), next(n…...

编程日记 2025/6/27 23:11:34

VUE3使用provice、inject实现组件间的方法调用

问题：A组件》B组件》C组件 C可以调用A的方法吗？ A组件：提供一个refreshTable方法 provide(refreshTable,(e:params)>{ ElMessage(底层组件请求刷新表格e.staff_ide.shijian) params e renderTableData() }) C组件： 注入refres…...

编程日记 2025/6/29 10:47:30

WebSocket 是什么？

好记忆不如烂笔头，能记下点东西，就记下点，有时间拿出来看看，也会发觉不一样的感受. WebSocket 是一种基于 TCP 协议的全双工通信协议，用于在客户端（如浏览器）和服务器之间建立持久化的双向实时…...

编程日记 2025/7/3 8:30:08

Java虚拟机栈

有不少Java开发人员一提到Java内存结构，就会将JVM中的内存区理解为仅有Java堆(heap)和Java栈(stack)。这种划分想法来源于传统的C、C程序的内存布局结构，但是在Java里有些粗糙了。尽管这种理解和划分非常不全面，但是从某种意义上来说&#xf…...

编程日记 2025/7/2 18:24:22

内存屏障指令

一、理解内存屏障（Memory Barrier） 开发者显然不明白一个事实——程序实际运行时很可能并不完全按照开发者编写的顺序访问内存，因为现代计算机为了提高性能而采取乱序执行，内存乱序访问主要发生在如下两个阶段： 编译…...

编程日记 2025/6/27 9:33:17

【MC】红石比较器

在《我的世界》（Minecraft）中，红石比较器（Redstone Comparator） 是一种高级红石元件，主要用于检测、比较或处理信号强度，同时还能与容器、特定方块互动。红石比较器有两种模式： 比…...

编程日记 2025/6/30 4:24:00

鸿蒙进阶——驱动框架UHDF 机制核心源码解读（一）

文章大纲引言一、uhdf 概述二、uhdf 的核心参与角色1、drivers/hdf_core/adapter/uhdf2/manager/device_manager.c1.1、drivers/hdf_core/framework/core/manager/src/devmgr_service.c#DevmgrServiceGetInstance通过objectId获取IDevmgrService实例1.2、drivers/hdf_core/fra…...

编程日记 2025/7/4 8:52:17

【C/C++】探索单例模式：线程安全与性能优化

文章目录 Singleton1 指针版本Version 1 非线程安全版本Version 2 加锁版本Version 3.1 双重检查锁版本 AtomicMutexVersion 3.2 双重检查锁版本 Atomic-onlyVersion 3 两种方式对比 2 引用版本Version 1 简单版本不推荐Version 2 初始化安全版本Version 3 初始化操作安全版本…...

编程日记 2025/6/29 2:33:48

Windows安装MongoDb.并使用.NET 9连接

以下是在 Windows 系统上安装 MongoDB 的详细步骤： 方法一：通过安装向导下载安装包访问官网下载页：https://www.mongodb.com/try/download/community选择版本： Version：推荐最新稳定版（如 8.09&#xff0…...

编程日记 2025/7/2 10:09:11

React深度解析：Hooks体系与Redux Toolkit现代状态管理实践

前言 React作为当今最流行的前端框架之一，其生态体系不断演进，为开发者提供了更高效、更优雅的解决方案。本文将深入探讨React的两大核心主题：Hooks体系（特别是useState和useEffect）以及Redux Toolkit现代状态管理方案…...

编程日记 2025/7/2 22:25:39

【Linux安装与维护】

文章目录一、实验目的二、实验环境三、实验内容3.1 Red Hat系统安装3.2 硬盘分区与挂载3.3 root密码恢复四、总结4.1 问题与解决4.2 实验收获一、实验目的熟练掌握Red Hat Enterprise Linux 8.x/9.0系统的安装流程，包括虚拟机配置、自定义分区和软件选择。学会…...

编程日记 2025/7/3 18:33:14

具有思考模式模型部署：Qwen3、DeepSeek-R1-Distill、Phi-4、QWQ系列

文章目录 1 介绍 Qwen3、DeepSeek-R1-Distill、Phi-4、QWQ2 部署 Qwen3、DeepSeek-R1-Distill、Phi-4、QWQ3 模型运行 Qwen3、DeepSeek-R1-Distill、Phi-4、QWQ4 结果Qwen3-0.6BDeepSeek-R1-Distill-Qwen-1.5BPhi-4-mini-reasoning 平台采用Autodl：https://www.auto…...

编程日记 2025/6/29 10:48:34

Mac安装redis

1、去往网址 http://编download.编redis.io/releases/ 找到任意结尾为* .tar.gz的文件下载下来 2、使用终端进入下载下来的redis文件 3、直接执行redis-server 如果出现redis标志性的图代表成功如果显示command not found :redis-server 则在终端再进入src文件夹下&…...

编程日记 2025/7/3 20:16:04

python-leetcode 71.每日温度

题目： 给定一个整数数组 temperatures ，表示每天的温度，返回一个数组 answer ，其中 answer[i] 是指对于第 i 天，下一个更高温度出现在几天后。如果气温在这之后都不会升高，请在该位置用 0 来代替。可以理…...

编程日记 2025/6/29 11:58:49

[250521] DBeaver 25.0.5 发布：SQL 编辑器、导航器全面升级，新增 Kingbase 支持！

目录 DBeaver 25.0.5 发布：SQL 编辑器、导航器全面升级，新增 Kingbase 支持！ DBeaver 25.0.5 发布：SQL 编辑器、导航器全面升级，新增 Kingbase 支持！ 近日，DBeaver 发布了 25.0.5 版本&#xf…...

编程日记 2025/7/2 20:28:59

Java枚举详解

文章目录 1. 引言1.1 什么是枚举1.2 为什么需要枚举1.3 枚举的优势 2. 枚举基础2.1 枚举的声明与使用基本声明在类中定义枚举枚举的基本使用 2.2 枚举的常用方法1. values()2. valueOf(String name)3. name()4. ordinal()5. toString()6. compareTo(E o)7. equals(Object other…...

编程日记 2025/6/29 7:27:55