iview admin 2.0 动态路由怎么添加

[YuppyHub]

从后台请求菜单， 能否给一个例子，谢谢啊。

[tiantian000]

请问这个问题解决了吗？

[SoyMeng]

核心方法

router.beforeEach(to, from, next) => {
 ...
 router.addRoutes(appRouters)
 next({ ...to })
})

根据后台数据构建生成appRouters即可

[modupantu]

@SoyMeng 你好，可以讲下具体实现过程吗？卡在这个地方了

[SoyMeng]

@caoruichun 首先如果是静态路由，通过addRoutes方式，那么

import appRouters from './routers'

router.beforeEach(to, from, next) => {
 ...
 router.addRoutes(appRouters)
 next({ ...to })
})

如果能理解，那么动态路由也并不是很复杂，只是通过一个异步请求去生成相同结构的appRouters,一般我们通过vux去实现

router.beforeEach(to, from, next) => {
 ...
 store.dispatch('generateRoutes').then(appRouters => {
   router.addRoutes(appRouters)
   next({ ...to })
  })
})

不知道这么说明能不能理解，至于如果实现generateRoutes的action我就不具体说明了。

[modupantu]

谢谢，还是不太理解。麻烦您了 @SoyMeng

[flzliao]

@SoyMeng 你好我通过这种方式测试动态添加路由，添加的路由没有效果，查看路由集合里也没有，这是怎么回事？

router.beforeEach(to, from, next) => {
 let temp = []
   temp.push({
       path: '/test',
       name: 'test',
       component: () =>
           import ('@/view/components/test.vue')
   })
   router.addRoutes(temp)

// Vue.nextTick(() => {
   //         console.log(router.options);
   //     })
   // }
})```

[SoyMeng]

@flzliao 首先，执行下面的方法很重要

next({ ...to })

router.options 中应该只保存静态路由列表

[modupantu]

前段时间写这个东西，我是投机取巧写的，效果实现了，但是写法不太好，不知道你写好了吗？

在 2018-08-24 10:56:47，"廖荣斌" [email protected] 写道：

@SoyMeng 你好我在router.beforeEach 方法里调用router.addRoutes()添加路由对象不报错，也没有效果，帮忙看下谢谢！`router.beforeEach((to, from, next) => { iView.LoadingBar.start() const token = getToken() let userMenu = JSON.parse(window.sessionStorage.getItem('userMenu')) // if (userMenu) { //这里是防止用户手动刷新页面，整个app要重新加载,动态新增的路由，会消失，所以我们重新add一次 let temp = [] temp.push({ path: '/tag', name: 'tag', component: () => import ('@/view/components/menutable/menu.vue') }) router.addRoutes(temp)

// Vue.nextTick(() => {

// console.log(router.options); // }) // }`

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[zhangxlgj]

你好，我现在遇到个问题，能不能帮忙解决下，用户登录动态添加路由规则，然后我切换用户登录，他们又相同的路由，现在又要添加路由，就会路由重复，有没有办法解决呢，我搜索很多资料都没有解决到，因为登录不会刷新页面嘛，不想通过location.reload()这种自己刷新页面的方式解决，有没有更优的方案呢

[liucien]

请问有人解决了么，声明个路由的数组变量用addRoutes()添加进去还是this.$router.options.routes出来还是不变

[SoyMeng]

@zhangxlgj 目前的资料好像是没找到更好的方式（毕竟一般退出登录是需要reload的），讨论的话建议重开一个issues

[dengpan0513]

@SoyMeng ，在router.js中将路由分为不需要权限的routes和需要权限的routerMap，然后根据后端返回的路由表(类似于这种{home: true, home_index: true})在vux去得到一个新的路由表，再使用router.addRouter()来添加。对于在其他地方有引用router.js的时候，引用的时routes还是routerMap呢

[SoyMeng]

@dengdengdengpan 一般在vuex中会保存一份完整的路由列表，至于该引用哪个就要看你的需求了。我个人的做法是通过动态路由生成后的路由列表都会在vuex中保存，那么在其他地方引用的时候是直接使用vuex中的数据，而不是import静态路由配置

[dengpan0513]

@SoyMeng 请问下怎么在vuex保存动态生成后的路由列表

[SoyMeng]

@dengdengdengpan 动态路由一般是根据用户数据产生的，也就是说是用户访问路由后才生成的数据。所以页面逻辑如果有使用到路由的地方，那么就在store中使用state.routers。 所以不是很清楚你具体的需求是什么，本身就是动态的数据，在app.js中有使用的地方？

[dengpan0513]

具体需求就是使用router.addRoutes()生成了当前用户有的路由表后，我不知道最开始在 iview-admin 中，比如在 main.vue、app.js 中都需要从 router.js 中导入嘛，这个时候导入的是什么？ <-------------------------------------------------------------------------------------------------------> 如果我在app.js、main.vue中传入的时routerMap(这个路由列表是对应的有权限控制的)，页面会正常显示，但会有当前用户不应该有的菜单，如下图所示 <------------------------------------------------------------------------------------------------------> 如果在app.js、main.vue中传入的是routes(这个路由列表是所有人都可以访问的，包括一个登陆，一个404)，页面就会是各种报错，如下图所示 <----------------------------------------------------------------------------------------------------> 如果在app.js、main.vue中传入的是store.state.router.routers(动态获取的当前用户的路由)，左边菜单栏还是有问题

[SoyMeng]

@dengdengdengpan 感觉是你没理解vuex的用法。这个你直接参考iview-admin关于菜单生成的方式就可以了。实际上静态路由跟动态路由只是生成方式的不同，菜单的生成是一样的。

[dengpan0513]

@SoyMeng 这样吧，麻烦你看下下面这个图

[SoyMeng]

@dengdengdengpan state.routers

[SoyMeng]

@dengdengdengpan 建议这个menuList从你动态生成路由的module中生成，也就是你定义的router.js。 思路没那么僵硬吧，这个项目只是参考作用

[dengpan0513]

@SoyMeng 这里的state是app.js里面的state吧，我根据不同的角色生成的对应的路由是存放在store/module/router.js里面在。其实我就是想实现一个不同的用户登录在左侧菜单上生成对应的菜单栏

[robrac]

什么动态路由看了一头雾水？搞了半天不就是要控制左侧栏菜单的用户是否可见而已。。。 一点拙见： 1.把你的一万个路由都都塞到router.js里，规划好access可见范围 2.在勾子函数router.beforeEach里通过调用API实时返回dynamicRoute列表去更新store.state.user.access 3.当然你们肯定会喷好SB，那我建议你们去跳Vue.js+Nuxt.js的SSR大坑儿，动态到你不要不要的～～

[simon9124]

已实现后端生成动态路由&左侧动态菜单：https://github.com/simon9124/iview-dynamicRouter