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

VUE如何前端控制及动态路由详细讲解

news 来源：原创 2025/6/27 20:41:01

在Vue.js中，前端控制通常指的是通过Vue的响应式系统、组件化、路由、状态管理等技术来实现对前端应用的控制和管理

一、前端路由控制基础

使用 vue-router 管理路由，通过路由守卫和动态添加路由实现权限控制。

1. 安装和配置

npm install vue-router@4

//路由实例
const router = createRouter({history: createWebHashHistory(),
});

二、动态路由实现原理

根据用户权限动态生成路由表，通过 router.addRoute() 添加路由

1. 定义路由模板（静态+动态）

//基础路由
const baseRoutes = [{path: "/",name: "login",component: () => import("../views/login.vue"),},{path: "/totalTwo",component: () => import("../views/total/totalTwo.vue"),children: [],},{path: "/totalOne",component: () => import("../views/total/totalOne.vue"),children: [],},{path: "/home",name: "home",component: () => import("../views/home.vue"),meta: { title: "首页" },},
];
//=============== 动态路由配置
const dynamicRoutes = [{path: "/about",name: "about",component: () => import("../views/aboutPage.vue"),meta: { requiresAuth: true, permissions: ["2"] },},{path: "/dashboard",name: "Dashboard",component: () => import("../views/Dashboard.vue"),meta: { requiresAuth: true, permissions: ["1"] },},
];
console.log(dynamicRoutes, "全部路由");
// 路由实例
const router = createRouter({history: createWebHashHistory(),routes: [...baseRoutes, ...dynamicRoutes], // 初始化时合并路由  
});

2. 动态添加路由

// 递归过滤路由函数
function filterRoutes(routes) {return routes.map((route) => {// 检查当前路由权限const hasPermission = store.permissions?.some(perm =>route.meta.permissions.includes(perm));// 无权限直接返回nullif (!hasPermission) return null;// 创建路由副本避免污染原始数据const filteredRoute = { ...route };// 递归处理子路由if (filteredRoute.children) {filteredRoute.children = filterRoutes(filteredRoute.children);// 可选：如果子路由全被过滤且父路由不需要独立存在// if (filteredRoute.children.length === 0 && !filteredRoute.component) {//   return null;// }}return filteredRoute;}).filter(route => route !== null); // 过滤掉null项
}// 获取过滤后的多维路由结构
const allowedRoutes = filterRoutes(dynamicRoutes);// 添加路由的逻辑保持不变
allowedRoutes.forEach((route) => {if (!router.hasRoute(route.name)) {router.addRoute(route); // 保持原有嵌套结构直接添加}
});

三、路由守卫实现权限控制

使用全局前置守卫验证权限

// router/index.js
router.beforeEach((to, from, next) => {const isAuthenticated = localStorage.getItem('token')// 需要登录但未登录if (to.meta.requiresAuth && !isAuthenticated) {next('/login')}// 已登录但访问/loginelse if (to.path === '/login' && isAuthenticated) {next('/dashboard')}// 检查路由权限else if (to.meta.role && !userRoles.includes(to.meta.role)) {next('/404') // 无权限页面}else {next()}
})

四、动态菜单生成

根据过滤后的路由生成导航菜单

<!-- 在侧边栏组件中 -->
<template><div v-for="route in accessibleRoutes" :key="route.path"><router-link :to="route.path">{{ route.meta?.title }}</router-link><div v-if="route.children"><!-- 递归处理子路由 --></div></div>
</template><script>
import { computed } from 'vue'
import { useRouter } from 'vue-router'export default {setup() {const router = useRouter()const accessibleRoutes = computed(() => {return router.options.routes.filter(route => !route.meta?.hidden && hasPermission(route)})return { accessibleRoutes }}
}
</script>

VUE如何前端控制及动态路由详细讲解

在Vue.js中，前端控制通常指的是通过Vue的响应式系统、组件化、路由、状态管理等技术来实现对前端应用的控制和管理一、前端路由控制基础使用 vue-router 管理路由，通过路由守卫和动态添加路由实现权限控制。 1. 安装和配置 npm install vue-router…...

编程日记 2025/6/27 20:41:01

【区块链安全 | 第九篇】基于Heimdall设计的智能合约反编译项目

文章目录背景目的安装1、安装 Rust2、克隆 heimdall-dec3、编译 heimdall-dec4、运行 heimdall-dec 使用说明1、访问 Web 界面2、输入合约信息3、查看反编译结果实战演示1、解析普通合约2、解析代理合约背景在区块链安全研究中，智能合约的审计和分析至关重要。…...

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

day1_Flink基础

文章目录 Flink基础今日课程内容目标为什么要学Flink技术更新迭代市场需求流式计算批量计算概念特点批量计算的优势和弊端流式计算生活中流场景流式计算的概念 Flink简介Flink历史Flink介绍 Flink架构体系已学过的框架技术Flink架构 Flink集群搭建Flink的集群模式Standalone模…...

编程日记 2025/6/27 20:23:09

43页可编辑PPT | 大数据管理中心设计规划方案大数据中心组织架构大数据组织管理

这份文档是一份关于大数据管理中心规划设计方案的详细报告，涵盖了背景与需求分析、整体规划方案、关键能力实现方案以及实施方案等内容。报告强调大数据在城市治理中的重要性，提出通过构建统一的大数据平台，整合城市各部门数据资源&#xff0…...

编程日记 2025/6/22 1:16:54

JavaScript数据结构

目录 JavaScript数据结构一、基础数据结构 1. 数组（Array） 2. 对象（Object） 二、ES6 高级数据结构 1. Map 2. Set 3. WeakMap 与 WeakSet 三、类型化数组（Typed Arrays） 四、其他数据结构实现 …...

编程日记 2025/6/27 20:00:39

如何使用 FastAPI 构建 MCP 服务器

哎呀，各位算法界的小伙伴们！今天咱们要聊聊一个超酷的话题——MCP 协议！你可能已经听说了，Anthropic 推出了这个新玩意儿，目的是让 AI 代理和你的应用程序之间的对话变得更顺畅、更清晰。不过别担心，为你的…...

编程日记 2025/6/25 2:05:22

Js 主线程和异步队列哪个先执行

JavaScript 主线程与异步队列执行顺序详解 JavaScript 是单线程语言，通过事件循环（Event Loop）机制来处理同步和异步任务。以下是主线程与异步队列的执行顺序解析： 1. 执行顺序基本原则 console.log(1. 主线程同步任务);setTim…...

编程日记 2025/6/27 5:22:06

C#实现HTTP服务器：处理文件上传---解析MultipartFormDataContent

完整项目托管地址：https://github.com/sometiny/http HTTP还有重要的一块：文件上传。这篇文章将详细讲解下，前面实现了同一个链接处理多个请求，为了方便，我们独立写了一个HTTP基类，专门处理HTTP请求。 ht…...

编程日记 2025/6/27 6:59:06

【hadoop】远程调试环境

根据上一节，我们已经安装完成hadoop伪分布式环境 hadoop集群环境配置_jdk1.8 441-CSDN博客还没安装的小伙伴可以看看这个帖子这一节我们要实现使用vscode进行远程连接，并且完成java配置与测试目录 vscode 配置远程安装java插件新建java项目 …...

编程日记 2025/6/27 20:39:21

检索增强生成（RAG）：强化 AI 智能体的知识 “武装”

技术点目录第一章、智能体(Agent)入门第二章、基于字节Coze 构建智能体(Agent)第三章、基于其他平台构建智能体（Agent）第四章、国内外智能体(Agent)经典案例详解第五章、大语言模型应用开发框架LangChain入门第六章、基于LangChain的大模型API接入第七章…...

编程日记 2025/6/22 14:11:50

使用 Provider 和 GetX 实现 Flutter 局部刷新的几个示例

1. 使用 Provider 实现局部刷新示例 1：ChangeNotifier Consumer 通过 ChangeNotifier 和 Consumer 实现局部刷新。 import package:flutter/material.dart; import package:provider/provider.dart;void main() {runApp(ChangeNotifierProvider(create: (_) &g…...

编程日记 2025/6/22 14:11:37

notepad++ 正则表达式

注意：Notepad正则表达式字符串最长不能超过69个字符 \ 转义字符如：要使用 “\” 本身, 则应该使用“\\” \t Tab制表符注：扩展和正则表达式都支持 \r 回车符CR 注：扩展支持，正则表达式不支持 \n 换行符…...

编程日记 2025/6/25 17:32:10

一起学大语言模型-通过ollama搭建本地大语言模型服务

文章目录 Ollama的github地址链接安装下载需求配置更改安装目录安装更改下载的模型存储位置Ollama一些目录说明日志目录运行一个模型测试下测试下更改服务监听地址和端口号 Ollama的github地址链接 https://github.com/ollama/ollama 安装下载 mac安装包下载地址&#xff1…...

编程日记 2025/6/27 19:51:38

webpack配置详解+项目实战

webpack在vue中的配置，适合想重新认知webpack的你 webpack配置-初级配置 1、配置入口和出口文件 2、配置loader 3、配置eslint（可组装js、jsx检查工具） 4、配置babel（将高级的js语法转换成低版本的js语法） 5、使用 ht…...

编程日记 2025/6/27 20:17:30

【学习笔记】文件上传漏洞--js验证、mime验证、.user.ini、短标签、过滤、文件头

概念文件上传漏洞什么是文件上传漏洞？ 文件上传漏洞是指由于程序员在对用户文件上传部分的控制不足或者处理缺陷，而导致的用户可以越过其本身权限向服务器上上传可执行的动态脚本文件。这里上传的文件可以是木马，病毒，恶意脚…...

编程日记 2025/6/25 3:33:44

经典卷积神经网络LeNet实现（pytorch版）

LeNet卷积神经网络一、理论部分1.1 核心理论1.2 LeNet-5 网络结构1.3 关键细节1.4 后期改进1.6 意义与局限性二、代码实现2.1 导包2.1 数据加载和处理2.3 网络构建2.4 训练和测试函数2.4.1 训练函数2.4.2 测试函数2.5 训练和保存模型2.6 模型加载和预测一、理论部分 LeNet是一…...

编程日记 2025/6/24 8:58:59

【VM虚拟机ip问题】

我就是我，不一样的烟火。文章目录前言一、启动VM虚拟机1. 开启虚拟机2. 输入账号密码登录3. 依次输入指令二、主机ping地址测试1. ping ip地址-成功三、安装-MobaXterm_Personal_21.51. 点击Session2. 选择SSH连接3. 输入信息4. 首次进入5. 连接成功总结前言 …...

编程日记 2025/6/27 19:48:04

【计算机视觉】YOLO语义分割

一、语义分割简介 1. 定义语义分割（Semantic Segmentation）是计算机视觉中的一项任务，其目标是对图像中的每一个像素赋予一个类别标签。与目标检测只给出目标的边界框不同，语义分割能够在像素级别上区分不同类别，从…...

编程日记 2025/6/27 19:57:18

【C++游戏引擎开发】《线性代数》（3）：矩阵乘法的SIMD优化与转置加速

一、矩阵乘法数学原理与性能瓶颈 1.1 数学原理矩阵乘法定义为：给定两个矩阵 A （ m n ） \mathrm{A}（mn） A（mn）和 B （ n p ） \mathrm{B}（np） B（np），它们的乘积 C = A B \mathrm{C}=AB C=AB 是一个 m p \mathrm{m}p mp 的矩阵，其中： C i , j = ∑ k = 1…...

编程日记 2025/6/25 21:38:15

聚焦交易能力提升！EagleTrader 模拟交易系统打造交易成长新路径

在全球市场波动加剧的背景下，交易者面临的挑战已不仅限于技术分析层面。许多交易者在实盘操作中常因情绪干扰导致决策变形，如何构建科学的交易心理与风险控制体系成为行业关注焦点。国内自营交易考试EagleTrader运用自己研发的模拟交易系统&#xff0c…...

编程日记 2025/6/27 16:48:34

文件分片上传

1前端 <inputtype"file"accept".mp4"ref"videoInput"change"handleVideoChange"style"display: none;">2生成hash // 根据整个文件的文件名和大小组合的字符串生成hash值，大概率确定文件的唯一性fhash(f…...

编程日记 2025/6/27 9:03:49

C#Lambda表达式与委托关系

1. 核心关系图示 A[委托] --> B[提供方法容器] B --> C[Lambda表达式] C --> D[委托实例的语法糖] A --> E[类型安全约束] C --> F[编译器自动生成委托实例] 2. 本质联系 2.1 类型关系 ‌Lambda表达式‌是编译器生成的‌委托实例‌表达式自动匹配符合签名的…...

编程日记 2025/6/23 19:52:10

机器翻译和文本生成评估指标：BLEU 计算公式

📌 BLEU 计算公式 BLEU 主要由**n-gram精确匹配率（Precision）和长度惩罚（Brevity Penalty, BP）**组成。 1️⃣ n-gram 精确匹配率计算不同长度的 n-gram（1-gram, 2-gram, ..., n-gram）在生成…...

编程日记 2025/6/27 14:57:32

24 python 类

在办公室里，类就像一个部门（如销售部、财务部），定义了该部门员工的共同属性（姓名、职位）和行为（处理客户、提交报表）。一、面向对象技术简介作为一个要入门码农的牛马&#xff0…...

编程日记 2025/6/25 1:21:04

pycharm与python版本

python 3.6-3.9 pycharm 2021版本搭配最好 python 3.8 pycharm 2019版本搭配最好 pycharm各版本下载...

编程日记 2025/5/26 15:31:49

23种设计模式-结构型模式-外观

文章目录简介问题解决方案示例代码总结简介也称：门面模式、Facade。外观是一种结构型设计模式，能为程序库、框架或其他复杂类提供一个简单的接口。问题假设你必须在代码中使用某个复杂的库或框架中的众多对象。正常情况下，你需要负责…...

编程日记 2025/6/25 12:05:15

open3d教程（三）点云的显示

官方文档位置： Visualization - Open3D 0.19.0 documentationhttps://www.open3d.org/docs/release/tutorial/visualization/visualization.html核心方法： o3d.visualization.draw_geometries([几何对象列表]) import open3d as o3dprint("Load …...

编程日记 2025/6/27 20:31:05

node.js、npm相关知识

Node.js 是一个基于 Chrome V8 JavaScript 引擎构建的开源、跨平台的 JavaScript 运行时环境，主要用于服务器端编程。它允许开发者使用 JavaScript 编写高性能的后端服务，突破了 JavaScript 仅在浏览器中运行的限制。 npm（Node Package Man…...

编程日记 2025/6/26 10:39:05

大象如何学会太空漫步？美的：科技领先、To B和全球化

中国企业正处在转型的十字路口。一边是全新的技术、全新的市场机遇；一边是转型要面临的沉重负累和巨大投入，无数中国制造、中国品牌仍在寻路，而有的人已经走至半途。近日，美的集团交出了一份十分亮眼的2024年财报。数据显示&…...

编程日记 2025/6/26 22:53:23

Go红队开发— 收官工具

文章目录免责声明个人武器开发美观输出Whois查询反查ip目录扫描子域名爆破被动扫描主动扫描(字典爆破)CDN检测免责声明 💡 本博客绝不涉及任何非法用途。 💡 使用者风险自担，违规后果自负。 💡 守法为先，技术向善。 …...

编程日记 2025/6/27 19:49:35

Android 应用程序包的 adb 命令

查看所有已安装应用的包名命令：adb shell pm list packages说明：该命令会列出设备上所有已安装应用的包名。可以通过管道符|结合grep命令来过滤特定的包名，例如adb shell pm list packages | grep com.pm，这将只显示包名中包含co…...

编程日记 2025/6/27 13:10:55

北京南文观点：后糖酒会营销，以战略传播重构品牌信心坐标

第112届全国糖酒会落下帷幕，参展品牌面临一个关键命题。如何在流量洪流中沉淀品牌价值？北京南文（全称：南文乐园科技文化（北京）有限公司）认为，糖酒会的结束恰是算法时代品牌认知战的真…...

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

Qt - findChild

findChild 1. 函数原型2. 功能描述3. 使用场景4. 示例代码5. 注意事项6. 总结在 Qt 中，每个 QObject 都可以拥有子对象，而 QObject 提供的模板函数 findChild 就是用来在对象树中查找满足特定条件的子对象的工具。下面我们详细介绍一下它的使用和注意事…...

编程日记 2025/6/27 20:06:14

2025年3月个人工作生活总结

本文为 2025年3月工作生活总结。研发编码一个curl下载失败问题的记录问题： 某程序，指定IP和账户密码配置，再使用curl库连接sftp服务器，下载文件。在CentOS系统正常，但在某国产操作系统中失败，需要用命…...

编程日记 2025/6/27 20:34:08

Spring Boot 七种事务传播行为只有 REQUIRES_NEW 和 NESTED 支持部分回滚的分析

Spring Boot 七种事务传播行为支持部分回滚的分析支持部分回滚的传播行为 REQUIRES_NEW：始终开启新事务，独立于外部事务，失败时仅自身回滚。NESTED：在当前事务中创建保存点（Savepoint），可局部…...

编程日记 2025/6/24 12:44:04

NVIDIA工业设施数字孪生中的机器人模拟

工业设施数字孪生中的机器人模拟文章目录工业设施数字孪生中的机器人模拟数字孪生技术的价值NVIDIA Omniverse平台工业机器人仿真的核心组件示例一：使用Isaac Sim创建基本机器人场景示例二：机器人运动规划和轨迹执行示例三：传感器集成与感知…...

编程日记 2025/6/23 22:12:36

docker安装jenkins

docker安装jenkins 1.安装javaJDK 服务器安装javaJDK ,因为我的服务器是直接集成了宝塔面板，我就直接从宝塔面板去安装JDK 最好安装17的JDK，因为后面会安装jenkins，需要17的版本 1.2查看安装是否完成 java --version 安装成功如下&#x…...

编程日记 2025/6/23 5:46:26

量子计算与人工智能融合的未来趋势

最近研学过程中发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家。点击链接跳转到网站人工智能及编程语言学习教程。读者们可以通过里面的文章详细了解一下人工智能及其编程等教程和学习方法。在当今科技飞速发展…...

编程日记 2025/6/24 8:21:59

人工智能在生物医药-新版ChatGPT-4o辅助一键生成机制图

新版ChatGPT-4o辅助一键生成机制图作为一位生物医学教授专家，我将基于PubMed最新研究和科研大数据信息，遵循您的要求，一步一步进行思考和预测。核心问题：乳酸化修饰促进肾透明细胞癌（ccRCC）恶性进展的机…...

编程日记 2025/6/1 14:57:30

支持 MCP 协议的开源 AI Agent 项目

关键要点研究表明，目前有多个开源 AI Agent 项目支持 MCP 协议，包括 ChatMCP、HyperChat、5ire 和 Cherry Studio 等。这些项目主要用于聊天或桌面助手，允许通过 MCP 协议连接外部数据和工具。MCP 协议是 2024 年 11 月由 Anthropic 开源的…...

编程日记 2025/6/25 19:21:50

JavaRedis和数据库相关面试题

JavaRedis面试题 1. Redis是什么以及Redis为什么快？ Redis（Remote Dictionary Server）是一个开源的内存键值数据库，支持多种数据结构（如字符串、哈希、列表、集合等），并提供持久化、复制、…...

编程日记 2025/6/25 16:33:33

Android开发RxJava3延迟操作

Android开发RxJava3延迟操作直接上代码： /*** param timeMillis 毫秒单位* desc : 延迟多少毫秒操作,* 注：它和Activity生命周期绑定，界面关闭了不会再执行delayTodoListener.delayTodo()* author : congge on 2021-03-25 15:31**/p…...

编程日记 2025/6/25 8:30:58

android 设置状态栏背景

一让activity ui界面和手机状态栏一样的背景要让 Activity 的 UI 界面和手机状态栏具有相同的背景颜色，并且能够随着深色模式和非深色模式的切换而改变颜色，你可以按照以下步骤操作： 1. 让 Activity 和状态栏背景颜色一致使用 window.s…...

编程日记 2025/4/11 14:21:44

vue 常见优化手段

文章目录 vue常见的优化手段前言使用key（避免明明相同的dom，每次更新都要重新生成）使用冻结的对象（避免无意义的响应式数据）使用函数式组件（减少vue组件实例的生成）vue3vue2使用计算属性（减少数据计算的次数）非实时绑定的表单项（避免表单过多触发监听事件）保持对象的…...

编程日记 2025/5/28 2:55:31

vue生命周期、钩子以及跨域问题简介

Vue 的生命周期是指 Vue 实例从创建到销毁的整个过程。在这个过程中，Vue 提供了一系列的生命周期钩子（Lifecycle Hooks），允许开发者在特定的时间点执行代码。以下是 Vue 的生命周期和钩子的简单说明： Vue 的生命周期阶…...

编程日记 2025/6/27 16:47:55

主相机绑定小地图

资源初始化：在类中通过 property 装饰器定义主相机、小地图相机、小地图精灵等资源属性，便于在编辑器中赋值。在 start 方法里，当确认这些资源存在后，创建渲染纹理并设置其大小，将渲染纹理与小地图相机关联&#xff0c…...

编程日记 2025/5/28 10:35:28

关于音频采样率，比特，时间轴的理解

是的，你的理解完全正确！-ar、-af aresampleasync1000 和 -b:a 64k 分别用于控制音频的采样率、时间戳调整和比特率。它们各自有不同的作用，但共同确保音频的质量和同步性。下面我将详细解释每个参数的作用和它们之间的关系。 1. -ar 参数作用…...

编程日记 2025/6/26 4:03:32

三、FFmpeg学习笔记

FFmpeg是一个开源、跨平台的多媒体处理框架，能够实现音视频的录制、转换、剪辑、编码、解码、流媒体传输、过滤与后期处理等几乎所有常见的多媒体操作。其强大之处在于几乎支持所有的音视频格式、编解码器和封装格式，是业界公认的“瑞士军刀”。 FFmp…...

编程日记 2025/6/26 8:04:01

什么是 Java 泛型

一、什么是 Java 泛型？ 泛型（Generics） 是 Java 中一种强大的编程机制，允许在定义类、接口和方法时使用类型参数。通过泛型，可以将数据类型作为参数传递，从而实现代码的通用性和类型安全。简单来说&…...

编程日记 2025/6/22 12:09:07

从 WPF 到 MAUI：跨平台 UI 开发的进化之路

一、引言在软件开发领域，用户界面（UI）开发一直是至关重要的环节。随着技术的不断发展，开发者对于创建跨平台、高性能且美观的 UI 需求日益增长。Windows Presentation Foundation（WPF）和 .NET Multi - pl…...

编程日记 2025/6/24 10:39:05