vue后台管理的动态加载路径方法

这里，我们将实现一个vue动态路由案例。当用户成功登录后，根据用户的角色，可以获取相应的菜单信息，并动态加载到我们的路线中。

在我们通用的后台管理系统中，我们会根据权限的粗细来控制每一个角色、每一个权限、每一个资源。同样，我们也需要实现这样的功能。在本文中，我将主要讨论vue的实现，但不会讨论后台接口。当我触摸它时，我们的后台界面是springcloud实现。

一.思路

在vue-router对象中，首先初始化公共路由，比如(404，登录)，然后在用户登录成功后，根据用户的角色信息，获取对应的权限菜单信息menuList，将后台返回的menuList转换成我们需要的路由器数据结构。然后，通过vue-router2.2中增加的新router.addRouter(routes)方法，我们可以将翻译后的路由信息保存在vuex中，这样我们就可以在我们的侧边栏组件中获取我们所有的路由信息，并渲染我们的左侧菜单栏来实现动态路由。

二、实现

1.公共路线的定义

从“vue”导入Vue从“vue-router”导入Router Vue . use(Router)/* Layout */从导入Layout./view/Layout/Layout ' export const constantrouttermap=[{ path: '/log in]，component :()=import(' @/view/log in/index ')，hidden: true }，{ path: '/404 '，component :()=import(' @/view/404 ')，hidden: true }，{ path : '/'，component: Layout，redirect : '/仪表板获取菜单信息

router.beforeEach((to，from，next)={ npprogress . start()//start进度条if (getToken()) { //确定是否有token /*有token */if(to . path=='/log in '){ next({ path : '/' })npprogress . done()//如果当前页面是dashboard将不会触发afterEach hook，所以手动处理它} else {if (store。吸气剂。角色。length===0){//判断当前用户是否拉了user_info信息库。调度(' getinfo ')。然后(RES={//Pull user _ info const roles=RES . roles store . dispatch(' get menu ')。然后(data={initmenu(路由器，数据)；});next() })。catch((err)={ store . dispatch(' FedLogout ')。然后(()={ Message.error(err || '验证失败，请重新登录')next({ path : '/' })})})else { next()} } else {/*没有令牌*/if(白名单.索引Of(to.path)！==-1) {//在免登录白名单中，直接转到next()} else {next('/login') //否则，重定向到登录页面npprogress . done()//如果当前页面是login的话每次钩子后都不会触发。所以手动处理它}}})路由器。在每个(()={nprogress。done ()//finish进度条})这里我们通过路由器中的beforeEach hook函数判断用户是否获取了角色信息，如果没有，那么请求后台获取对应的角色信息，然后通过角色信息再次请求对应的菜单列表获取菜单列表，然后对菜单列表进行格式化，转换成路由器数组的结构。

3.动态加载路由

从“”导入存储./store'export const initMenu=(路由器，菜单)={ if(menu . length===0){ return } let menu=format routes(菜单)；//最后加上let unfunded={ path: ' *，redirect:'/404 '。hidden : true } menus . push(unfound)ROUTERS . addroutes(menus)store.commit(' ADD _ ROUTERS '，menus)} export const format ROUTERS=(aMenu)={ const arount=[]aMenu . foreach(oMenu={ const { path，component，name，icon，childrens }=oMenu if(！validate null(component)){ let file path；const oRouter={ path: path，component(resolve){ let component path=' ' if(component==' Layout '){ require(['./view/Layout/Layout ']，resolve)return } else { componentPath=component }需要([` 0./${componentPath}.vue`]，resolve) }，name: name，icon: icon，children : validate null(children)？[] :格式路由(子)}路由器。push(或outer)}})返回一个路由器}这里我们把menList转换成routerList，因为我们在后台返回的数据不是标准的路由器结构，所以需要在这里进行处理。如果在后台返回规范，就不需要处理了。然后通过router.addRoutes将后台返回添加到我们的路由中，并保存在我们的vuex中。主要是404组件必须在动态路由之后加载。

4.渲染菜单

实际上，这已经不再是我们谈论的焦点。我们只需要取出上一步存储在vuex中的路由信息，并将其渲染到我们的左侧菜单栏中。这里我们使用元素-ui。

模板El-scroll bar wrap class=' scroll bar-wrap ' El-menu mode=' vertical ' : show-time out=' 200 ' : default-active=' $ route . path ' : Collapse=' is Collapse ' background-color=' # 304156 ' text-color=' # bfcbd 9 ' active-text-color=' # 409 eff '侧边栏-item v-for=' route in permission _ routers ' 3: key=' route . name ' 33336/SidBaritem“从“@/utils/validate”导入{ validate null }；从“@/utils/util”导入{ init menu }；导出默认{ components: { SidebarItem }，created() { }，computed: {.mapgetter([' permission _ routers '，'侧边栏'，' addRouters' ])，isCollapse() { return！this . sidebar . open } } }/script。这就是我们如何动态加载路线。很简单吗？关键是router.addRoute方法。接下来，我将谈谈反踏点。

第三，防坑

1.关于加载菜单信息的时间

在此之前，我将第二步获得的菜单信息放在我的侧边栏组件的create函数中，发现它没有任何问题。登录跳转到首页界面左侧的菜单，也是渲染成功。点击菜单进入我们动态加载的路由界面，没问题。但是当我点击刷新时，问题来了。空白页控制台不会报告错误。那时候我瞎了。怎么了，不好吗？如果遇到这种情况，不用担心，冷静分析整个过程，你就会发现问题所在。

1.登录成功跳转到home界面，home组件是公共路由，所以没有问题。

2.此时触发侧边栏组件的create hook，成功获取菜单列表

3.菜单列表被转换成路由阵列，并被加载到路由器实例和vuex中

4.侧边栏从vuex获得了路由阵列渲染菜单，并进入了我们的动态加载页面。显示正常，似乎没有问题。

5.单击浏览器刷新按钮或F5，页面将为空白。

原因：在第五步中，我们的浏览器被刷新，整个vue的实例将在spa应用程序中被重新加载，这意味着我的vue-router将被重新初始化，所以我们之前的动态addRoute不存在，但是我们此时访问了一个不存在的页面，所以我们的侧边栏组件将不会被访问，并且无法获得菜单信息，导致页面空白。因此，我们需要将加载菜单信息的步骤放在每台路由器之前的全局防护中。

2.关于404组件的位置

如你所见，

export const initMenu=(路由器，菜单)={ if(menu . length===0){ return } let menu=format routes(菜单)；//最后加上let unfunded={ path: ' *，redirect:'/404 '。hidden : true } menu . push(unfound)routers . add routes(menu)store . submit(' add _ routers '，menu)}我强调404组件必须放在动态路由组件的末尾，否则刷新动态加载的页面就会跳转到404页面。

第四，效果图

动态路由

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。