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

vue如何实现前端控制动态路由

news 来源：原创 2025/7/14 17:01:55

在 Vue.js 中，动态路由是一种根据不同用户权限或其他因素动态改变路由列表的功能。这种机制允许开发者根据后端提供的权限数据动态渲染前端路由，实现多用户权限系统，不同用户展示不同的导航菜单。

动态路由的配置

动态路由的配置涉及到前端路由的动态加载和解析。通常，动态路由的数据存储在数据库中，前端通过接口获取当前用户对应的路由列表并进行渲染。以下是实现动态路由的基本步骤：

静态路由配置：首先，需要配置静态路由，如登录页、首页等。这些路由通常不会改变，可以直接写在路由配置文件中。

// 创建路由实例
const router = createRouter({history: createWebHistory(import.meta.env.BASE_URL),routes: allRoutes
})

// 所有路由定义（静态+动态）
const allRoutes = [// 基础路由{path: '/',name: 'login',component: () => import("@/views/LoginView.vue")},{path: '/404',name: '404',component: () => import('@/views/Error/404View.vue')},// 动态路由容器（登录后内容）{path: '/layout',name: 'layout',component: () => import('@/Layout/MainLayout.vue'),children: [] // 初始为空，动态注入路由},
]

动态路由获取：在用户登录后，前端调用后端接口获取用户对应的权限类型role。

// 需要权限控制的路由配置（扁平化结构更易管理）
const dynamicRouteConfigs = [{path: '/home', // 注意使用相对路径name: 'home',component: () => import('@/views/HomeView.vue'),meta: { title: '首页', icon: 'House',roles: ['*'] // *表示所有登录用户}},{path: 'user/list',name: 'UserList',component: () => import('@/views/user/ListView.vue'),meta: { title: '用户列表',roles: ['1','2']}},{path: 'user/role',name: 'UserRole',component: () => import('@/views/user/RoleView.vue'),meta: { title: '角色管理',roles: ['1']}}
]

路由过滤的函数

// 权限过滤方法修正
const filterRoutes = (routes, roles) => {console.log('全部的路由',routes);return routes.filter(route => {const requiredRoles = route.meta?.roles || [];console.log(requiredRoles);// 允许所有用户或角色匹配return requiredRoles.includes('*') || requiredRoles.includes(roles+'');});
};

动态添加路由，先清空已有的动态路由，然后再调用添加路由的函数进行添加，

// 动态添加路由到layout
const addDynamicRoutes = (roles) => {// 清空已有动态路由const layout = router.getRoutes().find(r => r.name === 'layout')layout.children.forEach(child => {router.removeRoute(child.name)})// 过滤并添加新路由const allowedRoutes = filterRoutes(dynamicRouteConfigs, loginStore().roles); allowedRoutes.forEach(route => { router.addRoute('layout', route); });console.log(allowedRoutes);sessionStorage.setItem('menuPath',JSON.stringify(allowedRoutes));//存储的筛选过的动态路由sessionStorage.setItem('menuName',JSON.stringify(router.getRoutes()));//存储的所有动态路由console.log(router.getRoutes());// 确保404最后处理router.addRoute({ path: '/:pathMatch(.*)*',redirect: '/404'})
}

导航守卫部分，路由跳转前的操作。

获取用户状态存储实例，检测登录状态；判断用户未登录时直接跳转到登录页进行登录；已登录访问登录页处理，防止已登录用户重复访问登录页；动态路由注入。

使用router.addRoute（）注入路由；路由跳转处理，清除旧路由（避免重复）；

// 路由守卫修改部分（router/index.ts）
router.beforeEach(async (to, from, next) => {const store = loginStore()const isLogin = !!store.id// 未登录状态处理if (!isLogin) {return to.path === '/' ? next() : next('/')}// 已登录但访问登录页时重定向if (to.path === '/') {return next('/home')}// 动态路由加载逻辑if (!store.routesLoaded) {try {// 直接从store获取已保存的角色信息const userRoles = store.rolesconsole.log(userRoles);// 如果角色信息不存在则抛出错误if (!userRoles || userRoles.length === 0) {throw new Error('用户角色信息未获取')}// 添加动态路由addDynamicRoutes(userRoles)// 在添加路由后打印console.log('当前所有路由:', router.getRoutes().map(r => r.path))// 更新加载状态store.setRoutesLoaded(true)// 使用replace方式跳转避免重复记录历史return next({ ...to, replace: true })} catch (error) {console.error('路由加载失败:', error)// 清除用户状态并跳转登录页store.$reset()return next('/')}}next()
})

最后，总结整个流程，强调关键点，帮助用户全面理解路由守卫的工作机制和实现动态路由加载的正确方法。

vue如何实现前端控制动态路由

在 Vue.js 中，动态路由是一种根据不同用户权限或其他因素动态改变路由列表的功能。这种机制允许开发者根据后端提供的权限数据动态渲染前端路由，实现多用户权限系统，不同用户展示不同的导航菜单。动态路由的配置动态路由的配置涉及到前端…...

编程日记 2025/7/14 17:01:55

一、安装Django-5.0.3 1、将已下载的软件通过winscp上传至centos下 2、安装 [root@hcss-ecs-1e19 ~]# ll total 10372 -rw-r--r-- 1 root root 10620661 Feb 10 10:16 Django-5.0.3.tar.gz [root@hcss-ecs-1e19 ~]# pip3 install Django-5.0.3.tar.gz Processing ./Django-…...

编程日记 2025/7/11 20:06:49

C语言入门教程100讲（0）从了解C语言的发展史开始

文章目录引言1. C语言的起源2. C语言的诞生3. C语言的标准化4. C语言的进一步发展5. C语言的影响与应用6. C语言的未来结语引言 C语言作为一种高效、灵活且具有广泛应用的编程语言，在计算机科学史上占据着举足轻重的地位。它的设计不仅影响了后来的编程语言，也对操作系统、…...

编程日记 2025/7/14 16:24:22

笔记本电脑更换主板后出现2203:System configuration is invalid，以及2201、2202系统错误的解决

笔记本电脑更换主板后启动出现2203:System configuration is invalid，以及2201、2202系统错误的解决自用的一台ThinkpadT490笔记本电脑，由于主板故障，不得不更换主板，通过某宝购置主板后进行了更换。具体拆卸笔记本可搜索网络视频教程。注意：在更换主板时，注意先拍…...

编程日记 2025/7/14 1:30:00

如何为 Debian 和 Kali 系统更换软件源并更新系统

在 Linux 系统中，软件源（Software Repository）是获取软件包和更新的核心途径。然而，默认的软件源可能会因为地理位置、网络状况等原因导致下载速度缓慢，甚至无法访问。为了提升系统的软件获取效率，许多用户…...

编程日记 2025/7/14 1:19:21

git：远程仓库拉取到本地，fork到本地，修改后再上传

讲述仓库成员拉取远程仓库（即组长的仓库，里面有成员）到本地，修改内容再上传的详细步骤： 1.进入仓库，首先fork （如不，所作操作会直接对远程仓库进行，不用管理员审核&…...

编程日记 2025/7/14 16:15:12

C++ 中名字的作用域、概念、嵌套与实践（十八）

1. 名字的作用域基本概念作用域（scope） 指的是程序中的一个区域（通常被花括号 {} 包围），在这里一个名字（如变量名、函数名、类名等）有其特定含义。在同一个作用域中，一个名字只…...

编程日记 2025/7/14 16:13:22

Go语言nil原理深度解析：底层实现与比较规则

Go语言nil原理深度解析：底层实现与比较规则引言在Go语言中，nil 是一个特殊的关键字，用于表示引用类型的“零值”。它在指针、切片、映射、通道、接口和函数等类型中广泛使用。本文将从底层实现、比较规则、与其他语言的对比等角度&#…...

编程日记 2025/7/14 16:00:38

使用Java操作Redis

文章目录常用Redis键操作命令使用Java操作Redis配置 Redis 连接信息创建 Maven 项目结构操作字符串操作列表操作集合操作散列操作有序集合总结报错解决办法： 当使用redis-cli连接客户端出现not connected时使用redis-cli -h 192.168.222.101 -p 6379即可解决 …...

编程日记 2025/7/14 16:15:12

开源的CMS建站系统可以随便用吗？有什么需要注意的？

开源CMS建站系统虽然具有许多优点，但并非完全“随便用”。无论选哪个CMS系统，大家在使用的时候，可以尽可能地多注意以下几点： 1、版权问题了解开源许可证：不同的开源CMS系统采用不同的开源许可证，如GPL、…...

编程日记 2025/7/14 10:34:39

数据结构：探秘AVL树

本节重点理解AVL树的概念掌握AVL树正确的插入方法利用_parent指针正确更新平衡因子掌握并理解四种旋转方式：左单旋，右单旋，左右双旋，右左双旋一、AVL树的概念 AVL树得名于它的发明者G. M. Adelson-Velsky和E. M. Landis&…...

编程日记 2025/7/14 16:05:38

C++ 变量与初始化详解（十五）

1. 变量定义在 C 中，定义变量的基本形式通常是先写出类型说明符（type specifier），后面紧跟由逗号分隔的一个或多个变量名，最后以分号结束。简单示例如下： int sum 0, value, units_sold 0; Sales_ite…...

编程日记 2025/7/14 16:26:04

【网络协议详解】—— STP 、RSTP、MSTP技术（学习笔记）

一、STP技术工作原理 STP（Spanning Tree Protocol）生成树协议（IEEE 802.1D）是一种网络协议，用于在网络拓扑中防止环路的产生。在二层交换网络中，逻辑上阻塞部分接口，实现从根交换机到所有节点的…...

编程日记 2025/7/14 16:31:33

C++中将记录集的数据复制到Excel工作表中的CRange类CopyFromRecordset函数异常怎么捕获

文章目录一、异常类型及捕获逻辑二、完整代码示例三、关键错误场景与解决方案1. CopyFromRecordset 返回空数据2. COM错误 0x800A03EC3. Excel进程残留4. 内存不足四、调试与日志记录1. 启用详细日志2. 捕获错误描述3. 调试断点五、最佳实践在C中使用 CRange::CopyFromReco…...

编程日记 2025/7/13 23:32:24

综述速读|086.04.24.Retrieval-Augmented Generation for AI-Generated Content A Survey

论文题目：Retrieval-Augmented Generation for AI-Generated Content: A Survey 论文地址：https://arxiv.org/abs/2402.19473 bib引用： misc{zhao2024retrievalaugmentedgenerationaigeneratedcontent,title{Retrieval-Augmented Generation…...

编程日记 2025/7/14 16:11:38

对内核fork进程中写时复制的理解记录

前言文章写于学习Redis时对aof后台重写中写时复制的疑问一、感到不理解的歧义在部分技术文档中（以小林的文章为例），对写时复制后的内存权限存在如歧义： ! 二、正确技术表述根据Linux内核实现（5.15版本&#x…...

编程日记 2025/7/14 15:59:34

【新手初学】SQL注入getshell

一、引入木马介绍： 木马其实就是一段程序，这个程序运行到目标主机上时，主要可以对目标进行远程控制、盗取信息等功能，一般不会破坏目标主机，当然，这也看黑客是否想要搞破坏。木马类型： 按照功…...

编程日记 2025/7/14 16:13:23

【湖北工业大学2025年ACM校赛（同步赛）】题解

比赛链接 A. 蚂蚁上树题目大意给定一棵 n n n 个结点的树，根结点为 1 1 1。每个叶结点都有一只蚂蚁，每过 1 1 1 秒钟，你可以选一些蚂蚁往其父结点走一步，但是要求任意两只蚂蚁都不能在同一个非根结点上。问至少要…...

编程日记 2025/7/14 16:08:35

FPGA Verilog/VHDl 中的锁存latch

目录一、前言二、锁存器定义三、verilog中锁存的产生四、verilog中锁存的影响和消除五、FPGA中的锁存器资源一、前言在做FPGA设计时，我们要求在组合逻辑设计时，case或者if-else条件要完整，否则会产生锁存。本文主要介绍锁存产生的原因和影…...

编程日记 2025/7/10 23:43:30

Ubuntu24.04 配置远程桌面服务

一：安装 sudo apt update sudo apt install vino 二：设置 gsettings set org.gnome.Vino require-encryption false # 关闭加密（某些 VNC 客户端不支持加密） gsettings set org.gnome.Vino prompt-enabled false # 关闭连接…...

编程日记 2025/7/10 15:32:24

【二刷代码随想录】螺旋矩阵求解方法、推荐习题

一、求解方法 （1）按点模拟路径在原有坐标的基准上，叠加横纵坐标的变化值，求出下一位置，并按题完成要求。但需注意转角的时机判断，特别是最后即将返回上一出发点的位置。 （2）按层…...

编程日记 2025/7/10 1:22:46

Python基础教程：从格式化到项目管理

一、Typora代码块支持格式在Typora中编写代码时，支持多种语言的语法高亮显示： 二、代码格式化 1. %格式化（传统方式） 第一种方式：正规方式示例代码： name "张三" age 10 print("我的…...

编程日记 2025/7/10 9:46:25

Python爬虫：开启数据抓取的奇幻之旅（一）

目录一、爬虫初印象：揭开神秘面纱二、工欲善其事：前期准备 （一）Python 环境搭建 1.下载 Python 安装包： 2.运行安装程序： 3.配置环境变量（若自动添加失败）&#x…...

编程日记 2025/7/11 21:12:01

分布式ID服务实现全面解析

分布式ID生成器是分布式系统中的关键基础设施，用于在分布式环境下生成全局唯一的标识符。以下是各种实现方案的深度解析和最佳实践。一、核心需求与设计考量 1. 核心需求矩阵需求重要性实现难点全局唯一必须保证时钟回拨/节点冲突高性能高并发场景…...

编程日记 2025/7/9 1:05:18

浏览器与网络模块实践

浏览器渲染步骤浏览器渲染大致分为以下四个步骤： 1. 构建 DOM 树 • 过程：当浏览器接收到 HTML 文档后，会从上到下依次解析 HTML 代码。每遇到一个开始标签，就会创建一个对应的 DOM 节点，并根据标签的嵌套关系将这些…...

编程日记 2025/7/2 11:27:19

谈谈Minor GC、Major GC和Full GC

目录一、背景二、三者之间的区分 1、Minor GC 2、Major GC （1）老年代空间不足： （2）晋升（Promotion）失败： （3）空间分配担保失败： &#x…...

编程日记 2025/7/11 4:58:38

基于SpringBoot实现的高校实验室管理平台功能四

一、前言介绍： 1.1 项目摘要随着信息技术的飞速发展，高校实验室的管理逐渐趋向于信息化、智能化。传统的实验室管理方式存在效率低下、资源浪费等问题，因此，利用现代技术手段对实验室进行高效管理显得尤为重要。高校实验室作为…...

编程日记 2025/7/13 1:15:47

梯度裁剪（Gradient Clipping）

梯度裁剪（Gradient Clipping）是一种用于防止梯度爆炸（Gradient Explosion）的技术，具体来说： 1. 梯度裁剪的作用问题背景：在训练深度神经网络（尤其是RNN/LSTM）时&#x…...

编程日记 2025/7/9 8:01:42

联合办公空间WeWork的创新模式与私域流量时代的品牌温度——兼论开源AI大模型AI智能名片S2B2C商城小程序源码的潜在价值

摘要：本文聚焦于联合办公空间WeWork的成功模式，深入剖析其如何让创业用户摆脱传统租赁的束缚，打破空间与社交限制，为创业带来新的可能性与趣味性，并有效降低创业成本与风险。同时探讨了WeWork在私域流量时代所建立的平…...

编程日记 2025/7/14 1:32:35

Git配置

为什么要用：下载zip只是当前分支，不能进行仓库push、pull、checkout 1. 下载Git 先判断是否已经下过Git： git --version若没有版本号出来，就去下载：https://git-scm.com/downloads （Windows、linux、mac…...

编程日记 2025/7/2 17:32:47

Protobuf 的快速使用（二）

这个部分会对通讯录进⾏多次升级，使⽤ 2.x 表⽰升级的版本，最终将会升级如下内容： 不再打印联系⼈的序列化结果，⽽是将通讯录序列化后并写⼊⽂件中。从⽂件中将通讯录解析出来，并进⾏打印。新增联系⼈属性&#xff…...

编程日记 2025/7/13 7:20:04

网页设计思路

CSS实现思路: 用一个div直接父级继承在这里插入图片描述一LOGO结构 h1>a>搜索关键字二导航栏结构结构:ul>li>a 三搜索框结构 div>input/a 四用户头像结构 div>a>imgspan 处理行内块和行内垂直对齐方向使用 vertical-align...

编程日记 2025/7/10 7:55:20

Vue3 配合 fullPage.js 打造高效全屏滚动网页

引言在现代网页设计中，整屏滚动（Full-page Scrolling）已成为展示内容的一种流行方式。通过将内容分成若干个全屏页面，并配合流畅的过渡动画，可以为用户带来身临其境的浏览体验。本文将介绍如何使用 fullPage.js 插件来…...

编程日记 2025/6/28 4:54:07

全排列 II：去重的技巧与实现

全排列 II：去重的技巧与实现 1. 引言：排列问题的坑你有没有遇到过这样的问题？ 当我们在做全排列（Permutation）的时候，如果输入的数组中包含重复元素，生成的排列中就会出现大量重复项。这样不…...

编程日记 2025/7/9 14:42:27

微型导轨和普通导轨有哪些区别？

微型导轨和普通导轨都是常用的工业机械传动装置，目前，市场上有各种各样的导轨产品。那么微型导轨和普通导轨有哪些区别呢？ 1、尺寸：微型导轨尺寸较小，滑座宽度最小可达 8MM，长度最小可达 11MM 左右&#xf…...

编程日记 2025/7/9 10:53:37

Java 输入流到输出流

Java 输入流到输出流的复制方法主要有以下六种实现方式，根据性能、适用场景和实现原理可分为不同类别： 一、基础字节流方式实现原理：通过 FileInputStream 和 FileOutputStream 逐字节或块读取数据并写入。代码示例： try (In…...

编程日记 2025/7/11 8:59:57

Anaconda安装-Ubuntu-Linux

1、进入Anaconda官网，以下载最新版本，根据自己的操作系统选择适配的版本。 2、跳过注册： 3、选择适配的版本： 4、cd ~/anaconda_download 5、bash Anaconda3-2024.10-1-Linux-x86_64.sh 6、按Enter或PgDn键滚动查看协议&…...

编程日记 2025/7/9 23:10:47

每日一题之既约分数

题目描述本题为填空题，只需要算出结果后，在代码中使用输出语句将所填结果输出即可。如果一个分数的分子和分母的最大公约数是 1，这个分数称为既约分数。例如 3/4,1/8,7/1， 都是既约分数。请问，有多少个既约分…...

编程日记 2025/7/9 11:32:59

诠视科技MR眼镜如何使用VLC 进行RTSP投屏到电脑

文章目录一、应用开发部分（1）基础场景构建（2）添加XvCameraManager（3）添加XvMRVideoCaptureManager（4）添加XvRTSPStreamerManager（5）打包测试二、VLC media …...

编程日记 2025/7/13 9:23:29

“头”里有什么——HTML 元信息

2025/3/28 向全栈工程师迈进！ 一、看基本HTML <!doctype html> <html lang"zh-CN"><head><meta charset"utf-8" /><title>我的测试页面</title></head><body><p>这是我的页面</p&g…...

编程日记 2025/7/9 13:18:32

【Kafka】从理论到实践的深度解析

在当今数字化转型的时代，企业面临着数据量呈指数级增长、业务系统愈发复杂的挑战。在这样的背景下，高效的数据传输与处理技术成为了关键。Kafka，作为一款分布式消息队列系统，凭借其卓越的性能和丰富的特性，在众多企业的…...

编程日记 2025/7/10 1:38:40

Debezium系列之：使用Debezium和Apache Iceberg构建数据湖

Debezium系列之：使用Debezium和Apache Iceberg构建数据湖 Debezium Server Iceberg“Debezium Server Iceberg” 消费者设置数据复制Upsert 模式保留已删除的记录使用Upsert模式追加模式优化批处理大小在数据分析的世界中，数据湖是存储和管理大量数据以满足数据分析、报告或机…...

编程日记 2025/7/12 1:43:25

resnet网络迁移到昇腾执行（OM上篇）

目录总体介绍 pytorch迁移OM模型原始代码详细介绍模型加载和初始化初始化统计变量数据推理及归一化统计每个样本的结果基本概念 Softmax（归一化指数函数） 作用代码示例应用场景 argmax取最大值索引作用代码示例两者配合使用…...

编程日记 2025/7/10 5:12:06

RHCA核心课程技术解析5：红帽高可用性集群架构与深度实践

编程日记 2025/7/10 1:22:46

Display Serializer、Camera Deserializer（Camera Des）和SerDes‌ 加解串应用

‌1. 概述：三者的核心定位‌ ‌(1) SerDes（Serializer/Deserializer）‌ ‌定义‌：通用高速数据传输技术，实现‌并行↔串行‌双向转换。‌角色‌：数据链路的“翻译官”，解决并行传输的带宽与距…...

编程日记 2025/7/14 16:41:47

vue3+bpmn.js基本使用

一、案例使用依赖 // 必填"bpmn-js": "^7.3.1", "bpmn-js-properties-panel": "^0.37.2","bpmn-moddle":"^7.1.3","camunda-bpmn-moddle": "^7.0.1",// 可选"element-plus/icons-vue&qu…...

编程日记 2025/7/10 17:32:05

《数据结构：单链表》

“希望就像星星，或许光芒微弱，但永不熄灭。” 博主的个人gitee：https://gitee.com/friend-a188881041351 一.概念与结构链表是一种物理存储上非连续、非顺序的存储结构，数据元素的顺序逻辑是通过链表中的指针链接次序实现的。单…...

编程日记 2025/7/5 15:03:18

RedHatLinux(2025.3.22)

1、创建/www目录，在/www目录下新建name和https目录，在name和https目录下分别创建一个index.htm1文件，name下面的index.html 文件中包含当前主机的主机名，https目录下的index.htm1文件中包含当前主机的ip地址。 （1&…...

编程日记 2025/7/3 11:32:50

C++异常处理完全指南：从原理到实战

文章目录异常的基本概念基本异常抛出与捕获多类型异常捕获异常重新抛出异常安全异常规范（noexcept）栈展开与析构标准库异常总结异常的基本概念异常是程序运行时发生的非预期事件（如除零、内存不足）。C通过try、catch和throw提…...

编程日记 2025/7/8 2:02:09

Oracle 19C 备份

在 Oracle 19c 中，备份数据库通常使用 RMAN（Recovery Manager） 工具，它是 Oracle 提供的官方备份和恢复工具。以下是通过 RMAN 备份 Oracle 19c 数据库的详细步骤和命令。一、RMAN 基本概念 RMAN 是 Oracle 的备份和恢复工具&am…...

编程日记 2025/7/10 1:06:50

相关文章：