如何用addRoute实现子路由动态添加?前几天遇见过这个问题,记录一下我的解决方案。

    routers=[{
            path: "/",
            name: "layout",
            component: layout,
            meta: {
            },
            children: [
				{
                    path: "/door",
                    name: "door",
                    redirect: "/door/homePage",
                    component: door,
                    meta: {
                        name: "首页",
                    },
                },
			]
    }]    

我要再children里面通过动态路由的方式添加一个子路由。

{ path: '/get', component: get};

使用this.$router.addRoute();

经过实践发现 addRoute 只能添加第一级的路由。

然后又想到把父级路和子级路由拼接好,全部都重新给覆盖一遍,这样确实解决了问题,但是会出现name重复的警告。

在这里插入图片描述
最后又去看了看文档,只要router.matcher属性做修改,即新的routes机会替换老的routers,其实就是replaceRoutes()的含义(官方没有提供这个api)

//替换以前的 router 保证名字不重复
router.matcher = new VueRouter({ mode: "hash" }).matcher
router.addRoute(routers)

这样就解决了动态给子路由添加新路由了。也不会出现name重复的警告了。

目前我就想到了这种解决方法,还有什么解决方法欢迎一起来交流啊!

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐