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

vue-router学习(四) --- 动态添加路由

我们一般使用动态添加路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)。比如不同权限显示不同的路由。

主要使用的方法就是router.addRoute

添加路由

动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()它们只注册一个新的路由,也就是说,如果新增加的路由与当前位置相匹配,就需要你用 router.push()router.replace() 来手动导航,才能显示该新路由

router.addRoute({ path: '/about', component: About })

删除路由

有几个不同的方法来删除现有的路由:

  1. 通过添加一个名称冲突的路由。如果添加与现有途径名称相同的途径,会先删除路由,再添加路由
router.addRoute({ path: '/about', name: 'about', component: About })
// 这将会删除之前已经添加的路由,因为他们具有相同的名字且名字必须是唯一的
router.addRoute({ path: '/other', name: 'about', component: Other })
  1. 通过调用 router.addRoute() 返回的回调:
const removeRoute = router.addRoute(routeRecord)
removeRoute() // 删除路由如果存在的话

当路由没有名称时,这很有用

  1. 通过使用 router.removeRoute() 按名称删除路由:
router.addRoute({ path: '/about', name: 'about', component: About })
// 删除路由
router.removeRoute('about')

需要注意的是,如果你想使用这个功能,但又想避免名字的冲突,可以在路由中使用 Symbol 作为名字。

当路由被删除时,所有的别名和子路由也会被同时删除

注意一个事项vite在使用动态路由的时候import(‘…/…/’)无法使用别名@ 必须使用相对路径

const initRouter = async () => {const result = await axios.get('http://localhost:9999/login', { params: formInline });result.data.route.forEach((v: any) => {router.addRoute({path: v.path,name: v.name,这儿不能使用@component: () => import(`../views/${v.component}`)})router.push('/index')})console.log(router.getRoutes());}

查看现有路由

Vue Router 提供了两个功能来查看现有的路由:

  • router.hasRoute():检查路由是否存在。
  • router.getRoutes():获取一个包含所有路由记录的数组。

相关文章:

vue-router学习(四) --- 动态添加路由

我们一般使用动态添加路由都是后台会返回一个路由表前端通过调接口拿到后处理(后端处理路由)。比如不同权限显示不同的路由。 主要使用的方法就是router.addRoute 添加路由 动态路由主要通过两个函数实现。router.addRoute() 和 router.removeRoute()。它们只注册一个新的路…...

科东软件受邀参加2023国家工业软件大会,共话工业软件未来

10月28日,由中国自动化学会主办的2023国家工业软件大会在浙江湖州开幕。大会以“工业软件智造未来”为主题,一批两院院士、千余名专家学者齐聚一堂,共同探讨工业软件领域前沿理论和技术创新应用问题,共同谋划我国工业软件未来发展…...

ros启动节点的launch文件你真的会写吗?

<launch><!-- 启动节点 --><node name="lidar_data_feature_detection_node" pkg="lidar_data_feature_detection" type="lidar_data_feature_detection" output="screen" />...

AMEYA360:循序积累立体布局,北京君正实景展示AI-ISP

北京君正集成电路股份有限公司(下称“北京君正”)是国内较早深耕智能安防及泛视觉解决方案的芯片供应商之一&#xff0c;也是国内同时掌握CPU、VPU、ISP、AIE等核心技术的创新企业之一&#xff0c;自成立以来始终深耕行业&#xff0c;并持续迭代创新产品及创新方案。 在2023 CP…...

10.31 知识总结(选择器、css属性相关)

一、选择器 1.1 属性选择器 通过标签的属性来查找标签&#xff0c;标签都有属性 <div class"c1" id"d1"></div> id值和class值是每个标签都自带的属性&#xff0c;还有另外一种&#xff1a;自定义属性 <div class"c1" id"d1…...

【网络协议】聊聊TCP如何做到可靠传输的

网络是不可靠的&#xff0c;所以在TCP协议中通过各种算法等机制保证数据传输的可靠性。生活中如何保证消息可靠传输的&#xff0c;那么就是采用一发一收的方式&#xff0c;但是这样其实效率并不高&#xff0c;所以通常采用的是累计确认或者累计应答。 如何实现一个靠谱的协议&…...

记一次flask框架环境综合渗透测试

PART.01 登入过程 访问靶场地址http://101.43.22.226/?name2023&#xff0c;框架为Flask。 2. 测试存在ssti注入。 3. 直接执行以下命令。 http://101.43.22.226/?name{% for c in [].class.base.subclasses() %} {% if c.name ‘catch_warnings’ %} {% for b in c.i…...

博弈论学习笔记(2)——完全信息静态博弈

前言 这部分我们学习的是完全信息静态博弈&#xff0c;主要内容包括博弈论的基本概念、战略式博弈、Nash均衡、Nash均衡解的特性、以及Nash均衡的应用。 零、绪论 1、什么是博弈论 1&#xff09;博弈的定义 博弈论&#xff1a;研究决策主体的行为发生直接相互作用时候的决策…...

【COMP304 LEC4 LEC5】

LEC 4 1. Truth-Functionality Propositional logic 的connectives&#xff08;连接词&#xff09;are truth-functional 但是&#xff0c;有时候的描述不是true-functional的&#xff0c;比如&#xff1a;"Knowing that", "It is necessary that",&quo…...

表白墙(服务器)

目录 0.需求 1.创建Maven项目 2.给pom.xml内引入三个依赖 3.完善目录&#xff0c;并补充web.xml中的内容 4.编写代码 后端代码 ​编辑前端代码 5.引入数据库 创建message表 创建工具类 往MessageServlet类中添加方法 0.需求 前面写好了表白墙页面&#xff0c;但存…...

在 Mac 中卸载 Node.js

在 Mac 中卸载 Node.js&#xff0c;可以选择以下两种方法&#xff1a; 使用命令行卸载 Node.js 第一步&#xff1a;打开终端&#xff0c;输入以下命令显示 Node.js 的安装路径&#xff1a; which node 执行该命令后&#xff0c;会显示安装路径&#xff1a;/usr/local/bin/n…...

Hafnium构建选项及FVP模型调用

安全之安全(security)博客目录导读 目录 一、Hafnium构建选项 二、FVP模型调用 一、Hafnium构建选项 本节解释了在支持基于FF-A的SPM (SPMD位于EL3, SPMC位于S-EL1、S-EL2或EL3)的情况下进行构建时涉及的TF-A构建选项:...

第44天:前端及html、Http协议

前端 前端是所有跟用户直接打交道的都可以称之为是前端&#xff0c;比如&#xff1a;PC页面、手机页面、平板页面、汽车显示屏、大屏幕展示出来的都是前端内容。 前端的用处&#xff1a; 学了前端以后我们就可以做全栈工程师(会后端、会前端、会DB、会运维等),能够写一些简单的…...

shell_63.Linux产生信号

Linux 系统信号 信号 值 描述 1 SIGHUP 挂起&#xff08;hang up&#xff09;进程 2 SIGINT 中断&#xff08;interrupt&#xff09;进程 3 SIGQUIT 停止&#xff08;stop&#xff09;进程 9 …...

互联网摸鱼日报(2023-11-01)

互联网摸鱼日报(2023-11-01) 36氪新闻 毫末智行张凯&#xff1a;2023年高阶智能辅助驾驶市场迎来大爆发 ​撕开三星、金士顿市场&#xff0c;国产老牌存储器企业出海三年&#xff0c;营收翻三倍&#xff5c;insight全球 给医生一双“透视眼”&#xff0c;「锦瑟医疗」专注开…...

AR的光学原理?

AR智能眼镜的光学成像系统 AR眼镜的光学成像系统由微型显示屏和光学镜片组成&#xff0c;可以将其理解为智能手机的屏幕。 增强现实&#xff0c;从本质上说&#xff0c;是将设备生成的影像与现实世界进行叠加融合。这种技术基本就是通过光学镜片组件对微型显示屏幕发出的光线…...

语义分割 实例分割的异同点

语义分割和实例分割是计算机视觉领域中两个相关但不同的任务&#xff0c;它们都涉及对图像像素进行分类和标记&#xff0c;但关注的对象和目标有所不同。 目标对象&#xff1a; 语义分割&#xff1a;语义分割的目标是将图像中的每个像素标记为对应的语义类别&#xff0c;即将…...

C++学习初探---‘C++面向对象‘-继承函数重载与运算符重载

文章目录 前言继承继承是什么&#xff1f;三种访问权限的继承&#xff1a; 函数重载与运算符重载函数重载运算符重载可重载运算符&不可重载运算符 前言 第三次学习记录&#xff0c;依旧是C面向对象的内容。 继承 继承是什么&#xff1f; C中的继承是一种面向对象编程&am…...

Linux下搭建SRS服务器环境

搭建环境 Ubuntu的Linux环境srs 安装源码&#xff1a;源码地址为&#xff1a;GitHub - ossrs/srs at 3.0release 搭建步骤 下载srs源码 git clone GitHub - ossrs/srs: SRS is a simple, high-efficiency, real-time video server supporting RTMP, WebRTC, HLS, HTTP-FLV,…...

pytest 使用(一)

pytest 使用pytest&#xff0c;默认的测试用例的规则以及基础应用pytest测试用例的运行方式pytest执行测试用例的顺序是怎样的呢&#xff1f;如何分组执行&#xff08;冒烟&#xff0c;分模块执行&#xff0c;分接口和web执行&#xff09;pytest跳过测试用例 b站课程链接 使用…...

如何在看板中体现优先级变化

在看板中有效体现优先级变化的关键措施包括&#xff1a;采用颜色或标签标识优先级、设置任务排序规则、使用独立的优先级列或泳道、结合自动化规则同步优先级变化、建立定期的优先级审查流程。其中&#xff0c;设置任务排序规则尤其重要&#xff0c;因为它让看板视觉上直观地体…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

Swagger和OpenApi的前世今生

Swagger与OpenAPI的关系演进是API标准化进程中的重要篇章&#xff0c;二者共同塑造了现代RESTful API的开发范式。 本期就扒一扒其技术演进的关键节点与核心逻辑&#xff1a; &#x1f504; 一、起源与初创期&#xff1a;Swagger的诞生&#xff08;2010-2014&#xff09; 核心…...

企业如何增强终端安全?

在数字化转型加速的今天&#xff0c;企业的业务运行越来越依赖于终端设备。从员工的笔记本电脑、智能手机&#xff0c;到工厂里的物联网设备、智能传感器&#xff0c;这些终端构成了企业与外部世界连接的 “神经末梢”。然而&#xff0c;随着远程办公的常态化和设备接入的爆炸式…...

在QWebEngineView上实现鼠标、触摸等事件捕获的解决方案

这个问题我看其他博主也写了&#xff0c;要么要会员、要么写的乱七八糟。这里我整理一下&#xff0c;把问题说清楚并且给出代码&#xff0c;拿去用就行&#xff0c;照着葫芦画瓢。 问题 在继承QWebEngineView后&#xff0c;重写mousePressEvent或event函数无法捕获鼠标按下事…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

Linux 内存管理实战精讲:核心原理与面试常考点全解析

Linux 内存管理实战精讲&#xff1a;核心原理与面试常考点全解析 Linux 内核内存管理是系统设计中最复杂但也最核心的模块之一。它不仅支撑着虚拟内存机制、物理内存分配、进程隔离与资源复用&#xff0c;还直接决定系统运行的性能与稳定性。无论你是嵌入式开发者、内核调试工…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

云原生安全实战:API网关Kong的鉴权与限流详解

&#x1f525;「炎码工坊」技术弹药已装填&#xff01; 点击关注 → 解锁工业级干货【工具实测|项目避坑|源码燃烧指南】 一、基础概念 1. API网关&#xff08;API Gateway&#xff09; API网关是微服务架构中的核心组件&#xff0c;负责统一管理所有API的流量入口。它像一座…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...