uve-elementUI-temple模板添加动态路由

最新推荐文章于 2023-08-09 20:43:34 发布

菜鸟遇坑日记

最新推荐文章于 2023-08-09 20:43:34 发布

阅读量392

点赞数

分类专栏： elementUI-vue-admin 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43567887/article/details/106824624

版权

elementUI-vue-admin 专栏收录该内容

2 篇文章

订阅专栏

在基于Vue的模板项目中，遇到添加动态路由不生效的问题。在src/permission.js文件中添加动态路由代码后，虽然能获取到数据，但路由并未更新。尝试了网上的解决办法未果。问题根源在于layout/components/Sidebar/index.vue中，模板项目使用的方法与admin项目不同，需要调整以匹配正确的动态生成菜单的方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述

在模板项目中添加动态路由，于是仿照了admin项目添加路由权限控制文件以后，在、src/permission.js文件中添加如下代码，

		  const asyncRoutes = await store.dispatch('permission/generateRoutes')
         // dynamically add accessible routes
         router.addRoutes(asyncRoutes)
         next({ ...to, replace: true })

这样添加动态路由后 router似乎并没有更新，但是打印asyncRoutes却有数据

解决办法

网上找说的router.options.router= asyncRoutes这种方式尝试后，没有效果
修改layout/components/Sidebar/index.vue 便利生成菜单的时候temple 使用的是
<sidebar-item v-for="route in routes" :key="route.path" :item="route" :base-path="route.path" />
但是admin 项目中确是
<sidebar-item v-for="route in permission_routes" :key="route.path" :item="route" :base-path="route.path" />