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

vue清除动态路由

               项目中往往都是添加动态路由,如何删除已经添加进来的路由往往被忽视,为此这里做一下记录:

        查看vue-router路由文档 可以看出 Vue2中是通过matcher来进行重新赋值来进行清空的。

let createRouter  = () => new Router({mode: 'history', //hash history后端支持可开,需配置nginx, 次模式下不会再返回404界面routes: constantRouterMap, // 路由路径scrollBehavior: () => ({ y: 0 }) // 在切换时定位路由滚动条的位置
});const router = createRouter()export function resetRouter () { //清空路由的方法const newRouter = createRouter()router.matcher = newRouter.matcher 
}
export default router;

而Vue3中没有关于matcher这个属性,这样一来,就需要自己通过循环遍历来清除路由,

const router = createRouter({routes,history: createWebHashHistory()
})
console.log(router.getRoutes());//重置路由
export function resetRouter(){let routers = router.getRoutes()console.log(routers);routers.map((it:any)=>{if(!whiteList.includes(it.name)){router.removeRoute(it.name)}})console.log(routers);
}

** 注:whiteList是白名单,

相关文章:

vue清除动态路由

项目中往往都是添加动态路由,如何删除已经添加进来的路由往往被忽视,为此这里做一下记录: 查看vue-router路由文档 可以看出 Vue2中是通过matcher来进行重新赋值来进行清空的。 let createRouter () > new Router({mode: history, //ha…...

rsyslog实现将日志存储到mysql中

​ 前提:准备好msql server或mariadb server; ​ 1、安装rsyslog连接至mysql server的驱动模块; [13:24 rootcentos6.8~]# yum install -y rsyslog-mysql [13:24 rootcentos6.8~]# rpm -ql rsyslog-mysql /lib64/rsyslog/ommysql.so /usr/…...

2015架构案例(五十一)

第5题 【说明】某信息技术公司计划开发一套在线投票系统,用于为市场调研、信息调查和销售反馈等业务提供服务。该系统计划通过大量宣传和奖品鼓励的方式快速积累用户,当用户规模扩大到一定程度时,开始联系相关企业提供信息服务,并…...

亚马逊测评安全吗?

测评可以说是卖家非常宝贵的财富,通过测评和广告相结合,可以快速有效的提升店铺的产品销量,提高转化,提升listing权重,但现在很多卖家找真人测评补单后店铺出现问题导致大家对测评的安全性感到担忧,因为真人…...

VS2022新建项目时没有ASP.NET Web应用程序 (.NET Framework)

问题:如图,VS2022新建项目时没有“ASP.NET Web应用程序 (.NET Framework)”的选项解决方法:点击跳转至修改安装选项界面选择安装该项即可:...

TIA博途软件中如何设置在程序中自动显示变量的注释信息?

TIA博途软件中如何设置在程序中自动显示变量的注释信息? 本例以TIA博途V15为例进行举例说明 如下图所示,新建一个项目后,打开PLC变量表,这里我选择几个变量进行举例说明,给这几个变量添加注释信息, 打开OB1,编写一句简单的程序,如下图所示,可以看到此时变量只显示名称…...

Hadoop3教程(一):Hadoop的定义、组成及全生态概览

文章目录 (1)定义1.1 发展历史1.2 三大发行版本1.3 Hadoop的优势1.4 Hadoop的组成 (13)HDFS概述(14)Yarn架构(15)MapReduce概述(16) HDFS、YARN、MapReduce三…...

成为数据分析师要具备什么能力——功法篇(上)

这篇文章适合做了一段时间数据分析工作,开始思考怎么继续提升自己的分析师、运营或者是实习了一段时间的同学,这时的你也许会想几个问题: 为什么我做出来的分析总觉得没有别人的那么高级? 老板为什么总说我的分析“太浅了”&#…...

【MySQL】Java的JDBC编程

目录 ♫什么是JDBC ♫JDBC常用接口和类 ♪Connection接口 ♪Statement对象 ♪ResultSet对象 ♫JDBC的使用 ♪添加“驱动包” ♪创建数据源,描述数据库服务器在哪 ♪和数据库服务器建立连接 ♪构建SQL语句 ♪执行SQL语句 ♪释放资源 ♫什么是JDBC 我们前面操…...

windows OpenCV(包含cuda)最简安装教程

windows OpenCV(包含cuda)最简安装教程 1. 在Windows下安装vcpkg vcpkg是一个开源的C包管理器,它能帮助我们轻松地安装和管理C库和工具。要在Windows上安装vcpkg,可以按照以下步骤进行: 克隆vcpkg仓库: 首…...

Vue3 + Nodejs 实战 ,文件上传项目--实现文件批量上传(显示实时上传进度)

目录 技术栈 1.后端接口实现 2.前端实现 2.1 实现静态结构 2.2 整合上传文件的数据 2.3 实现一键上传文件 2.4 取消上传 博客主页:専心_前端,javascript,mysql-CSDN博客 系列专栏:vue3nodejs 实战--文件上传 前端代码仓库:jiangjunjie…...

狂砸40亿美元,亚马逊向OpenAI竞争对手Anthropic投资

9 月 25 日下午,亚马逊在公司官网发布,向大模型公司 Anthropic 投资 40 亿美元, Anthropic以拥有对标 ChatGPT 的谈天机器人 Claude 而出名。 这项新的战略合作将结合双方在更安全的生成式AI领域的技术和专业知识,加速Anthropic未…...

目标检测YOLO实战应用案例100讲-基于YOLOv5_tiny算法的路面裂缝智能检测

目录 前言 国内外研究现状 公路路面裂缝检测方法现状 基于深度学习检测算法现状...

P5682 [CSP-J2019 江西] 次大值% 运算 set 去重的一道好题

#include <bits/stdc.h> using namespace std; int n, x, len, a[100010], ans; set<int> s; set<int>::iterator asd; int main() {/*a[n-1] 是最大的a[n-2] 可能是次大的a[n]%a[n-1]<a[n-1] 不可能是最大的&#xff0c;可能是次大的a[n-1]%a[n-2]<…...

vue3后台管理框架之API接口统一管理

在开发项目的时候,接口可能很多需要统一管理。在src目录下去创建api文件夹去统一管理项目的接口; 参数请参考mock中的模拟接口 //统一管理咱们项目用户相关的接口import request from @/utils/requestimport type { loginForm, loginResponseData, userInfoReponseData } fro…...

线性表的插入、删除和查询操作

线性表的插入、删除和查询操作 1、定义线性表 定义一个线性结构&#xff0c;有列表默认长度设置为50&#xff0c;列表数量 #include <stdio.h> #define MaxSize 50typedef int Element; typedef struct{Element data[MaxSize];int length; }SqList;2、顺序表插入 插入…...

基于深度学习网络的疲劳驾驶检测算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 4.1疲劳检测理论概述 4.2 本课题说明 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 matlab2022a 3.部分核心程序 In_layer_Size [227 227 3]; img_size [224,…...

【文件系统】Linux文件系统的基本存储机制

Linux文件系统是Linux操作系统的重要组成部分&#xff0c;它负责管理计算机存储设备上的文件和目录。Linux文件系统采用类Unix的设计&#xff0c;具有强大的性能和可扩展性&#xff0c;支持多种文件系统类型&#xff0c;如ext4、XFS、Btrfs等。在项目存储架构的设计中&#xff…...

Outlook导入导出功能灰色,怎么解决

下载安装 Outlook 软件后&#xff0c;登陆账号&#xff0c;然后选择“文件” - “导出”&#xff0c;结果发现“导出”按钮是灰色的&#xff0c;根本无法导出。根据官方说法&#xff1a;由于配置没有完成或者office产品没有正确激活。outlook导出键为灰色原因由于配置没有完成或…...

Chrome 同站策略(SameSite)问题

问题产生 问题复现&#xff1a; A项目页面使用 iframe 引用了B项目 B项目登录页面输入账号密码后点击登录 无法跳转 尝试解决&#xff1a; 在B项目修改了跳转方式 但无论是 this.$router.push 还是 window.herf 都无法实现跳转在iframe中使用 sandbox 沙箱属性 同样无法实现跳…...

OpenLayers 可视化之热力图

注&#xff1a;当前使用的是 ol 5.3.0 版本&#xff0c;天地图使用的key请到天地图官网申请&#xff0c;并替换为自己的key 热力图&#xff08;Heatmap&#xff09;又叫热点图&#xff0c;是一种通过特殊高亮显示事物密度分布、变化趋势的数据可视化技术。采用颜色的深浅来显示…...

前端倒计时误差!

提示:记录工作中遇到的需求及解决办法 文章目录 前言一、误差从何而来?二、五大解决方案1. 动态校准法(基础版)2. Web Worker 计时3. 服务器时间同步4. Performance API 高精度计时5. 页面可见性API优化三、生产环境最佳实践四、终极解决方案架构前言 前几天听说公司某个项…...

高频面试之3Zookeeper

高频面试之3Zookeeper 文章目录 高频面试之3Zookeeper3.1 常用命令3.2 选举机制3.3 Zookeeper符合法则中哪两个&#xff1f;3.4 Zookeeper脑裂3.5 Zookeeper用来干嘛了 3.1 常用命令 ls、get、create、delete、deleteall3.2 选举机制 半数机制&#xff08;过半机制&#xff0…...

CentOS下的分布式内存计算Spark环境部署

一、Spark 核心架构与应用场景 1.1 分布式计算引擎的核心优势 Spark 是基于内存的分布式计算框架&#xff0c;相比 MapReduce 具有以下核心优势&#xff1a; 内存计算&#xff1a;数据可常驻内存&#xff0c;迭代计算性能提升 10-100 倍&#xff08;文档段落&#xff1a;3-79…...

HTML前端开发:JavaScript 常用事件详解

作为前端开发的核心&#xff0c;JavaScript 事件是用户与网页交互的基础。以下是常见事件的详细说明和用法示例&#xff1a; 1. onclick - 点击事件 当元素被单击时触发&#xff08;左键点击&#xff09; button.onclick function() {alert("按钮被点击了&#xff01;&…...

Rapidio门铃消息FIFO溢出机制

关于RapidIO门铃消息FIFO的溢出机制及其与中断抖动的关系&#xff0c;以下是深入解析&#xff1a; 门铃FIFO溢出的本质 在RapidIO系统中&#xff0c;门铃消息FIFO是硬件控制器内部的缓冲区&#xff0c;用于临时存储接收到的门铃消息&#xff08;Doorbell Message&#xff09;。…...

Springboot社区养老保险系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;社区养老保险系统小程序被用户普遍使用&#xff0c;为方…...

Angular微前端架构:Module Federation + ngx-build-plus (Webpack)

以下是一个完整的 Angular 微前端示例&#xff0c;其中使用的是 Module Federation 和 npx-build-plus 实现了主应用&#xff08;Shell&#xff09;与子应用&#xff08;Remote&#xff09;的集成。 &#x1f6e0;️ 项目结构 angular-mf/ ├── shell-app/ # 主应用&…...

使用Spring AI和MCP协议构建图片搜索服务

目录 使用Spring AI和MCP协议构建图片搜索服务 引言 技术栈概览 项目架构设计 架构图 服务端开发 1. 创建Spring Boot项目 2. 实现图片搜索工具 3. 配置传输模式 Stdio模式&#xff08;本地调用&#xff09; SSE模式&#xff08;远程调用&#xff09; 4. 注册工具提…...

【Redis】笔记|第8节|大厂高并发缓存架构实战与优化

缓存架构 代码结构 代码详情 功能点&#xff1a; 多级缓存&#xff0c;先查本地缓存&#xff0c;再查Redis&#xff0c;最后才查数据库热点数据重建逻辑使用分布式锁&#xff0c;二次查询更新缓存采用读写锁提升性能采用Redis的发布订阅机制通知所有实例更新本地缓存适用读多…...