【vue+router】解决路由重复警告:[vue-router] Duplicate named routes definition

news2025/1/24 14:29:11

vue页面动态添加路由,但加载页面会报警告:

[vue-router] Duplicate named routes definition: { name: "xxx", path: "xxx" }

这个问题解释为:路由命名重复
在这里插入图片描述
网上有一些大神剔除原有路由的做法:
1、古墩古墩
2、白日有梦

但写在permission和router里我总有新错误 加上我不太会写路由的全局函数orz
所以提供一个我的解决思路:
1、你先看下报错里都有哪些页面(比如我上面的pic
2、再看下自己得到的路由数据是什么样的(在注入路由函数里添加console
3、把重复名称项的name改成 ‘ ’
在这里插入图片描述
在这里插入图片描述
在注入路由之前进行名称改造:

let acc = accessRoutes;
// 循环第一层 
for (let i = 0; i < acc.length; i++) { 
  let element = acc[i];
  // 如果第二层有children 
  if (element.children && element.children.length>0) {
    // 就循环第二层
    for (let j = 0; j < element.children.length; j++) {
      let item = element.children[j];
      // 把警告里的name全列举上
      if (
        item.name == 'CourseCenter'||
        item.name == 'Troops'||
        item.name == 'Organizational'||
        item.name == 'Equipment'||
        item.name == 'Task'||
        item.name == 'Material'||
        item.name == 'Expert'||
        item.name == 'PlanManagement'||
        item.name == 'AddressList'||
        item.name == 'Info'||
        item.name == 'Filter'||
        item.name == 'CompanyMessage'||
        item.name == 'Consult'||
        item.name == 'Risk'
      ) {
        // 改造这个name(relax!改name不会有任何冲突)
        acc[i].children[j].name='';
      }
    }
  }
}

位置总览:
在这里插入图片描述

再看控制台,真的没有警告啦~

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/407904.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue中computed的详细讲解

vue中computed的详细讲解1.定义2.用法3.computed的响应式依赖(缓存)4.应用场景1.定义 computed是vue的计算属性&#xff0c;是根据依赖关系进行缓存的计算&#xff0c;只有在它的相关依赖发生改变时才会进行更新 2.用法 一般情况下&#xff0c;computed默认使用的是getter属性…

Vue组件传值(props属性,父到子,子到父,兄弟传值)

文章目录[TOC](文章目录)前言一、props是什么&#xff1f;使用规则二、父传子 props实现步骤代码实现效果展示二.子传父 $emit实现步骤代码实现效果展示三.兄弟传值 EventBus实现步骤代码实现效果展示总结前言 Vue是数据驱动视图更新的框架, 平时写业务时,都会把页面不同模块拆…

CSS - 浮动布局(float)

目录 标准布局 标准流 浮动与浮动流&#xff0c;及元素脱标概念 浮动元素 浮动的特点 浮动带来的问题&#xff1a;标准流父级容器高度塌陷 清除浮动 浮动布局 margin负值 标准布局 CSS将所有的元素都当成盒子&#xff0c;CSS布局其实就是如何堆放盒子。 在说浮动布局…

【玩转CSS】学成在线(文末素材源码自取)

&#x1f525;一个人走得远了&#xff0c;就会忘记自己为了什么而出发&#xff0c;希望你可以不忘初心&#xff0c;不要随波逐流&#xff0c;一直走下去&#x1f3b6; &#x1f98b; 欢迎关注&#x1f5b1;点赞&#x1f44d;收藏&#x1f31f;留言&#x1f43e; &#x1f984; …

vue监听缓存数据(localStorage) 中值的更新

2个vue组件之间数据同步&#xff0c;可以通过监听localStorage数据变化&#xff0c;来改变数据的值。 方法&#xff1a;可以重写localStorage的setItem方法&#xff0c;当调用setItem方法设置新值的时候&#xff0c;会new Event(setItemEvent) 用window.dispatchEvent()这个…

vue 项目兼容 IE 浏览器

前言 : 网上 找了很多关于 vue项目兼容 IE 浏览器的 教程步骤 , 写的 非常详细 , 但根据我自己的项目,怎么找 都没有找到 webpack.base.conf.js 这个文件 ,就没办法配置 因为 vue-cli最新版本原因 , 隐藏了配置文件, 所有的 都在 vue.config.js中配置 可以根据自己的 vue-cli 版…

手摸手带你玩转Vue3——Vue2升级Vue3

今年年初&#xff0c;尤大大公布了一个重磅消息&#xff0c;将Vue3作为Vue的默认版本。 这无疑不是对我们开发人员的内卷煽风点火&#xff01; vue默认版本改动意味着&#xff0c;官方将会把Vue研发重心放到vue3上&#xff0c;vue2也开始走下坡路&#xff0c;至于淘汰过时只是…

前端插件库之vue3使用element-plus实现登录、注册页面和忘记密码弹窗,以及已有样式的覆盖

vue3使用element-plus实现登录/注册页面登录/注册页面组件预览添加忘记密码弹窗预览已有样式的修改1.字体大小2.router-link默认样式登录/注册页面组件 vue3 的登录和注册页面 目前只有框架和函数框架, 根据具体需要填充, 已有功能: 1.没有勾选同意使用手册, 登录和注册按钮是…

后端返回各种图片形式在前端的转换及展示

一、 接口返回的图片显示如下所示&#xff1a;&#xff08;在控制台看的&#xff09;返回的是这个图片&#xff08;二进制&#xff09; 可是&#xff0c;在 打印的时候&#xff0c;返回的却是 出现问题的原因的axios 默认返回的是 json 文本形式&#xff0c;二进制图片数据被强…

TS复习-----TS中的函数

目录 一、ts函数的定义 二、ts中定义函数传参 1.函数传参方法 2.可选参数 3.默认参数 4.剩余参数 函数重载 一、ts函数的定义 函数是一种特殊的对象&#xff0c;可以被调用。TS 里的函数和原生&#xff0c;ES 6 里的函数差不太多&#xff0c;只是多了一些其他功能。 //…

HTML入门学习笔记+详细案例

✨HTML入门学习笔记详细案例 作者介绍: &#x1f393;作者:偷偷敲代码的青花瓷&#x1f431;‍&#x1f680; &#x1f440;作者的Gitee:代码仓库 ✨✨我和大家一样都是热爱编程✨,很高兴能在此和大家分享知识,希望在分享知识的同时,能和大家一起共同进步,取得好成绩&#x1f9…

实现H5和小程序之间相互跳转

功能描述&#xff1a; 1、 当点击理赔服务的时候&#xff0c;跳转到小程序页面 2、 当点击返回的时候&#xff0c;从小程序跳回H5页面&#xff08;内嵌H5以及关闭小程序&#xff09; 功能1&#xff1a;H5跳转小程序 vue中实现步骤 在 template 标签中写html <wx-open-lau…

【Maven】maven安装、IDEA创建maven的web项目、添加依赖、集成Tomcat

学习目录前言maven简介maven的下载与安装优化配置参数1.修改本地仓库路径2.设置阿里云私服镜像3.指定JDK版本IDEA创建第一个maven的web项目IDEA集成TomcatHello java&#xff01;前言 朋友们在写后端的过程中&#xff0c;遇到功能复杂的业务时需要导入不同的jar包&#xff0c;…

Logging system failed to initialize using configuration from ‘classpathlogbacklogback-spring.xml‘

2021-12-31&#xff1a; 项目在Windows系统上可以正常运行,然而移到Mac系统上运行出现一下报错!! 据报错信息显示,初始化“logback-spring.xml”失败,监测到“Logback”配置出错,非法的声明异常, 创建“[/apps/logs/sns_error.log]”的父目录失败… 主要原因是初始化配置文…

[暑假]Vue生命周期-笔记

什么是生命周期? 生命周期: 又名: 生命周期回调函数, 生命周期函数, 生命周期钩子. 所谓的生命周期函数, 就是Vue在关键时刻帮我们调用的一些特殊名称的函数 生命周期函数的名字不可更改, 但是函数的具体内容是程序员根据需求编写的 生命周期函数中的 this 指向是 vm 或 组件…

CSS样式:渐变色圆角边框

目录预期效果解决方法1.两层元素&#xff1a;外层渐变背景圆角内边距&#xff0c;里层圆角背景色2.伪元素&#xff1a;background-clip属性伪元素定位元素本身背景&#xff08;以伪元素背景色做边框&#xff09;3.单层元素&#xff1a; background-clipbackground-iamgebackgro…

PDF.js 预览pdf文件流预览pdf,及ie浏览器兼容性问题,解决方案!!(开发笔记)

一、 官网下载pdf.js &#xff1a;Getting Started 注意&#xff1a; 这俩包 都不支持ie&#xff0c;因为用的是es6&#xff0c;ie解析不出来 下完以后引进去。下面为省事 找几个市面上常用的方法&#xff1a; 1、文件流转base64的 这是在自己的js请求里面 //PDFdata 是a…

Nginx超时配置

Nginx主要有四类超时设置&#xff1a;客户端超时设置、DNS解析超时设置、代理超时设置&#xff0c;如果使用ngx_lua&#xff0c;则还有lua相关的超时设置。 1&#xff0e;客户端超时设置 对于客户端超时主要设置有读取请求头超时时间、读取请求体超时时间、发送响应超时时间、…

vue项目 升级依赖包

项目维护过程中&#xff0c;可能会因为依赖包存在漏洞而升级依赖&#xff0c;或者因为需要高本版中提供的新特性而升级依赖。 在升级依赖之前&#xff0c;可以先执行 npm outdated 命令&#xff0c;查看当前哪些已安装软件包版本过时了。 标签释义current代表当前版本号want…

【面试】什么是网关/服务网关?网关/服务网关的作用是什么?

文章目录一、前言二、网关2.1 什么是网关&#xff1f;2.2 网关的作用是什么&#xff1f;2.3 网关的工作流程2.4 软件系统网关三、什么是服务网关四、为什么需要服务网关五、服务网关应用一、前言 对于网关&#xff0c;从专业角度&#xff0c;一般运维和网络管理员会比较了解一…