首页 > 其他分享 >尚品汇后台管理项目:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition 警告处理方案

尚品汇后台管理项目:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition 警告处理方案

时间:2022-09-24 22:34:27浏览次数:81  
标签:definition named vue js Duplicate 404 router

 问题描述:切换路由时控制台不断弹出警告  vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition   

 

 解决方案参考vue动态添加路由,跳转页面时,页面报错路由重复:vue-router.esm.js?8c4f:16 [vue-router] Duplicate named routes definition: { name: "Login", path: "/login" } - 古墩古墩 - 博客园 (cnblogs.com)

使用后还会报 404 重复的问题

 

 因为router--index.js中有两处使用了404 name,修改任意一处就能解决问题

export const constantRoutes = [{
{
  path: '/404',
  name: '404',
  component: () => import('@/views/404'),
  hidden: true
}
]

// 错误路由:当路径出现错误的时候重定向至404
export const anyRoutes = [
  // 404 页面必须在最后
  { path: '*', name: '错误页面', redirect: '/404', hidden: true }
] 

至此问题完美解决,控制台又是干干净净的啦

标签:definition,named,vue,js,Duplicate,404,router
From: https://www.cnblogs.com/shiny-moon/p/16726846.html

相关文章

  • Vue项目的部署(服务器)
    前几天帮朋友写了一个可以动态查看地点温度的前端项目。目前已经部署上线了,访问链接点这里。服务器是朋友的,倒时候打不开会很正常,说不定又使用服务器玩大数据项目去了......
  • vue3新语法糖——setup script
    前言vue3上线已经很久了,许多小伙伴应该都已经使用过vue3了。那么在使用vue3compositionAPI的时候有没有觉得整个过程会比较繁琐呢。比如当你定义了一个方法,然后发现模......
  • Vue 页面渲染完成后获取元素并修改其CSS样式
    1.将所要获取的元素加入ref属性<divslot="header"class="clearfix"ref="clearFix"></div>2.获取元素对象,并修改样式methods:{changeStyle:function(){let......
  • vue的生命周期
     1.创建前beforeCreateddata和methods还没有进行初始化 2.创建后createddata和methods已经初始化完成 3.渲染前beforeMount 已经编译好了模板字符串,但是......
  • vue 使用百度地图JavaScript API GL 组件
    <template><divclass="component"><el-cardclass="cardStyle"><!--ready,地图组件渲染完毕时触发,返回一个百度地图的核心类和地图实例--><baidu-map......
  • 计算机毕业设计 SpringBoot+Vue零食商城平台系统 零食网上商城系统 零食购物商城系统J
    ......
  • vue3 基础-补充 ref & provide-inject
    本篇主要对一些被以前内容(渲染,传值)等忽略的几个常用小技巧进行补充说明啦.v-once即对某个dom节点生效,其会限定只会渲染一次,不论数据是如何的变化,演示如下:<!......
  • vue3 的 ref、isRef、toRef、toRefs、toRaw 详细介绍
    ref、isRef、toRef、toRefs、toRaw看着一堆类似的东西,一个头两个大,今天整理一篇文章详细介绍它们的功能及区别。1、refref属性除了能够获取元素外,也可以使用ref函数,......
  • Vue脚手架
    Vue脚手架vue-cli首先确保已安装的node和npmnode-vnpm-v其次确保npm镜像地址是淘宝镜像(有梯子除外)npmconfiggetregistry如果结果是:https://registry.npmmirror......
  • 讲讲Vue diff算法
    diff算法就是进行虚拟节点对比,并返回一个patch对象,用来存储两个节点不同的地方,最后用patch记录的消息去局部更新Dom。特点:比较只会在同层级进行,不会跨层级比较在di......