这篇文章主要介绍了关于vue动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下
地狱空荡荡，师兄在土创。虽然土，但是可以疗伤。前言vue项目实现动态路由的方式大体可分为两种:
1.前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)
详情可参阅花裤衩大佬的项目手把手...,我当时看这个项目看了好久才明白一点逻辑，
因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑
2.后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)
这两种方法各有优点，效果都能实现，我们公司是通过第二中种方法实现的，原因就是公司项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限，担心路由放到前端
不安全(以上的话是公司的后台同学讲的)，那好吧，抱着都试试、锻炼下自己能力的态度，
我们搞了第二种方法。今天我们来讲讲用后台传递路由表实现动态路由的思路，因为公司的项目里路有部分用到了vuex，我就把路由部分脱离vuex整理了出来，让大家有个启发，并不是绝对的解决方案，只是思路
github:https://github.com/mrblackant...
在线查看:http://an888.net/antrouter/#/...
思路整理以下四步骤对应的代码都在下方会讲到，并且是对应的
1.后台同学返回一个json格式的路由表，我用easymock造了一段:动态路由表，大家可参考;
2.因为后端同学传回来的都是字符串格式的，但是前端这里需要的是一个组件对象啊，写个方法遍历一下，将字符串转换为组件对象;
3.利用vue-router的beforeeach、addroutes、localstorage来配合上边两步实现效果;
4.左侧菜单栏根据拿到转换好的路由列表进行展示;
大体步骤：拦截路由->后台取到路由->保存路由到localstorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)代码1.路由表
每个路由都使用到组件layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
路由是数组格式data: { router: [ { path: , component: layout, redirect: dashboard, children: [ { path: dashboard, component: dashboard/index, meta: { title: 首页, icon: dashboard } } ] }, { path: /example, component: layout, redirect: /example/table, name: example, meta: { title: 案例, icon: example }, children: [ { path: table, name: table, component: table/index, meta: { title: 表格, icon: table } }, { path: tree, name: tree, component: tree/index, meta: { title: 树形菜单, icon: tree } } ] }, { path: /form, component: layout, children: [ { path: index, name: form, component: form/index, meta: { title: 表单, icon: form } } ] }, { path: *, redirect: /404, hidden: true } ] }
2.将后端传回的component: layout, 转为component: layout组件对象
因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成对象，
因为后台传回的是字符串，所以要把加载组件的过程 封装成一个方法(此处参考花裤衩大神的解决方法)，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈const _import = require('./router/_import_' + process.env.node_env)//获取组件的方法import layout from '@/views/layout' //layout 是架构组件，不在后台返回，在文件里单独引入function filterasyncrouter(asyncroutermap) { //遍历后台传来的路由字符串，转换为组件对象 const accessedrouters = asyncroutermap.filter(route => { if (route.component) { **加粗文字** if (route.component === 'layout') {//layout组件特殊处理 route.component = layout } else { route.component = _import(route.component) } } if (route.children && route.children.length) { route.children = filterasyncrouter(route.children) } return true }) return accessedrouters}
3.使用beforeeach、addroutes、localstorage来配合实现
beforeeach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localstorage存储起来，利用addroutes动态添加路由，
ps：beforeeach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
global.antrouter是为了传递数据给左侧菜单组件进行渲染import axios from 'axios'var getrouter //用来获取后台拿到的路由router.beforeeach((to, from, next) => { if (!getrouter) {//不加这个判断，路由会陷入死循环 if (!getobjarr('router')) { axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => { getrouter = res.data.data.router//后台拿到路由 saveobjarr('router', getrouter) //存储路由到localstorage routergo(to, next)//执行路由跳转方法 }) } else {//从localstorage拿到了路由 getrouter = getobjarr('router')//拿到路由 routergo(to, next) } } else { next() }})function routergo(to, next) { getrouter = filterasyncrouter(getrouter) //过滤路由 router.addroutes(getrouter) //动态添加路由 global.antrouter = getrouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作 next({ ...to, replace: true })}function saveobjarr(name, data) { //localstorage 存储数组对象的方法 localstorage.setitem(name, json.stringify(data))}function getobjarr(name) { //localstorage 获取数组对象的方法 return json.parse(window.localstorage.getitem(name));}
4.拿到遍历好的路由，进行左侧菜单渲染
上边第三部会给 global.antrouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染，这里又是参考了花裤衩大神的layout部分 ,这里我就不贴代码了才疏学浅，希望大家多多指正，尤其对于路由拦截那部分，应该还有很多优化的地方，欢迎指正
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
通过vue属性$route的params传参
vue-router+nginx非根路径的配置方法
vue如何解决addroutes动态添加路由后刷新失效的问题
以上就是vue动态路由的实现(后台传递路由，前端拿到并生成侧边栏)的详细内容。