vue,addRoutes添加动态路由不成功,出现两个问题

这是我的原始路由信息:
const routes = [

{
    path     : '/login',
    name     : '登录',
    hidden   : true,
    component: login
},
{
    path: '/index',
    name: '首页',
    hidden   : true,
    component: home,
    redirect: '/advertisementList',
    children: []
}

]
通过addRoutes添加里面的路由,方法为:
const menuData = [

{id:1,path:'/advertisementList',component: require('@/page/index.vue'),name:'首页广告图配置',icon:'fa-server'}
]

this.$router.options.routes[1].children.push(menuData)
console.log(this.$router.options.routes);

this.$router.addRoutes(this.$router.options.routes) // path: “/login”追加重复了
console.log(this.$router.options.routes);

浏览器出现的报错信息为:[vue-router] Duplicate named routes definition: { name: “登录”, path: “/login” }
addRoutes抛出的错误为:[vue-router] “path” is required in a route configuration.
请大神解答,addRoutes的具体使用方法,我这是哪里出错了?

回答:

我没用addRoutes这个api,不过我出现了同样的错误,Duplicate named routes definition,我是配置routes时配了两个一样的routes,解决的方法是其中一个改为redirect
修改前:

{
    path: '/',
    name: 'index',
    component: Index
}, {
    path: '/index',
    name: 'index',
    component: Index
},

修改后:

{
    path: '/',
    redirect: {
        name: 'index'
    }
}, {
    path: '/index',
    name: 'index',
    component: Index
}

回答:

首先是2个问题:

  1. 浏览器出现的报错信息为:[vue-router] Duplicate named routes definition: { name: “登录”, path: “/login” }

A:你的路由重复添加了,不过没关系,重复的会自动被忽略,只是提出一个 warning

2.addRoutes抛出的错误为:[vue-router] “path” is required in a route configuration.
A:很明显这里是 path 是必须的,你检查一下你的路由配置,那里缺少了 path

回答:

第二个问题:
this.$router.options.routes[1].children.push(menuData)
改成 :
this.$router.options.routes[1].children=menuData

回答:

我也有这个问题,楼主解决了吗?

回答:

第一个是因为之前的路由name添加重复,你看看是不是还有”name”相同的route

回答:

你看看是否是因为你重复添加了两次数据,console一下实际路由。

回答:

你动态添加路由的时候,导致重复了,你可以选择在每次addRoutes的时候,matcher重置一下。
在router/index.js里面,重写一个addRoutes方法

router.$addRoutes = (params) => {
    router.matcher = createRouter().matcher // reset router
    router.addRoutes(params)
}

然后在调用时,换成新的$addRoutes方法就行了

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注