解决vue路由name同名,路由重复的问题_若依重复命名路由

vue

158 浏览量更新于2023-05-11 收藏 81KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

解决解决vue路由路由name同名同名,路由重复的问题路由重复的问题

主要介绍了解决vue路由name同名,路由重复的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小

编过来看看吧

在项目中，想让路由后缀为空，或者index的时候，都跳转到路由为index的页面，于是在router中如下配置

routes: [{

path: '/',

component: () => import('@/components/index').then(m => m.default)

},{

path: '/index',

component: () => import('@/components/index').then(m => m.default)

}]

但是浏览器告警信息：但是浏览器告警信息：

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

因为路由重复添加，name一样造成，利用redirect重定向

routes: [{

path: '/',

redirect: {

}

// name: 'index',

// component: () => import('@/components/index').then(m => m.default)

},{

path: '/index',

component: () => import('@/components/index').then(m => m.default)

}]

补充知识：补充知识：vue路由使用踩坑点：当动态路由再使用路由路由使用踩坑点：当动态路由再使用路由name去匹配跳转时总是跳转到根路由的问题去匹配跳转时总是跳转到根路由的问题

闲话少说，直接问题：

之前我的路由时这么写的

{

path:'/serverInfo/:id',

name:'serverInfo',

component:() => import('@/views/serverRequest/SRInfo')

}

但是呢，头部做了个通知面板，代码如下：

<el-popover

popper-class="messagePopper"

placement="bottom"

width="300"

v-model="visiblity"

trigger="click">

<router-link :to="{

name:item.route,

params:{

messageId:item.rid

}

}">{{'【' + item.message + '】'}}</router-link>

<span>{{item.message_time}}</span>

</div>

<el-badge slot="reference" :value="messageData.length" class="item" :hidden="messageData.length === 0">

</el-badge>

</el-popover>

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

weixin_38556985

粉丝: 3
资源: 906

会员权益专享

解决vue路由name同名,路由重复的问题

vue 解决addRoutes多次添加路由重复的操作

Vue 解决路由过渡动画抖动问题(实例详解)

Web前端框架应用：第5章 Vue路由-命名路由.pptx

vue 路由名称重复

vue路由跳转name

vue路由跟node路由的区别

本地 vue 路由 history 404

vue 路由引入使用r

vue 路由改用hash模式

vue addroutes多次添加路由重复的操作

vue路由配置属性

vue路由重复点击会报错

Vue 路由守卫的作用

npm vue路由安装

vue路由可以嵌套html吗,vue 路由嵌套.html

vue 路由守卫 路由鉴权

html配置vue路由

vue 路由使用实例

vue 路由404配置 获取路由来源

vue路由redirect作用

会员权益专享

最新资源

vue 路由守卫路由鉴权

vue 路由404配置获取路由来源