Vue动态路由的实现（后台传递路由，前端拿到并生成侧边栏）

　　动态路由是一个常用的功能，根据后台返回的路由json表，前端动态显示可跳转的路由项，下面来讲解一下具体的实现方式：
　　大致业务需求：前端在login登陆页，输入账号密码后，点击登陆，接口返回登陆成功的同时，也会把该用户可操作的路由链表返回给前端（JSON数组格式），前端拿到这个JSON数组，来渲染成侧边栏列表（说的是PC端），我们需要将所有的页面都写好，然后去匹配后台返回的部分路由来进行展示（比如项目一共有100个页面，后台返回了10个路由地址，那么我们只展示返回的对应的10个即可）
　　说一下思路：
　　我们可以将路由分为3个部分
　　1.默认展示的部分（包括login页面、404页面等等）
　　2.后台返回的部分（具有权限操作的部分路由）
　　3.全部动态路由（比如后台返回了10个路由地址，我们全部动态的路由是100个地址，所做的就是将100个全部动态路由里面和后台返回的对应匹配的10个路由追加到默认路由里面，就可以完成动态路由的流程了）
　　正常路由，我们的写法大概是这样的：//src/router/index.js import Router from ＂vue-router＂ Vue.use(Router) const Routes = [     {         path:＂/＂,         component:Login,         meta: {             title: ＂登录页＂         }     },     {         path:＂/Home＂,         component:Home,         meta: {             title: ＂Home主页＂         }     } ] const Routers = new Router({     routes: Routes }) export default Routers;
　　我们要做动态路由，就需要改变一下这个结构（分为动态+静态），这里的静态是指需要匹配展示对应的，所以，我们需要在建一个全部的路由JSON//stc/router/index.js const defaultRoutes = [ //...这默认路由就是上面代码内的登录页/404页面... ] const allRouters = [//这里就是全部动态路由     {         path:＂/UserList＂,         component:UserList,         meta: {             title: ＂人员管理＂         }     },     {         path:＂/PwdList＂,         component:PwdList,         meta: {             title: ＂密码管理＂         }     } ] const Routers = new Router({     routes: defaultRoutes//默认渲染 -> 默认路由 }) export default Routers;
　　所有的静态路由和动态路由，都写完了，接下来就是关键部分（将后台返回的路由json拼接到route内），由于我们是在login页面点击登陆后，进行的跳转，所以，把代码写到路由钩子内（Routers.beforeach函数）Routers.beforeEach((to,from,next) => {     if(to.path != ＂/＂ && !store.state.isLogin) {         //跳转的不是首页 同时 用户还未登陆         //这个判断，我们就可以基本判定用户是在做登陆时候的跳转         // 拿到登陆时，接口返回的路由数组（vuex内）,大致是这样的         let resRouterArr = [             {                 routeName: ＂人员管理＂,                 children: [                     {                         routeName: ＂销售管理＂,                         ...                     },                     {                         routeName: ＂内勤管理＂,                         ...                     }                 ]             }         ]         let routerArr = []         resRouterArr.forEach(item => {             allRouters.forEach(all => {                 if(item.routeName == all.routeName) {                     //拿到本地路由对象                     let obj = JSON.parse(JSON.stringify(all))                     let childrenRouter = []                     if(item.children && item.children.length > 0) {                         item.children.forEach(childItem => {                             all.children.forEach(allItem => {                                 if(childItem.routeName == allItem.routerName) {                                     childrenRouter.push(allItem)                                 }                             })                         })                         obj.children = childrenRouter                     }                     routerArr.push(obj)                 }             })         })         Routers.addroutes(routerArr)//addroutes为添加路由数组的方法         store.commit(＂domRouteTree＂,rousterArr)//存储进vuex，之后页面左右路由列表渲染使用         next({...to,replace:true})//进行路由跳转     } else {         next()     } })
　　这样，我们跳转到之后的业务页面，就可以看到列表左侧生成的动态路由列表了，点击左侧的几个动态生成的路由，也很nice，么得问题~
　　ps：这里遇到了一个坑，踩了一会儿，也记上
　　以前都是这样写的import UserList from ＂@/views/User/UserList＂
　　但是跳转过去之后，页面就会出现白屏报错的情况，查了半天，原来要补齐路径import UserList from ＂@/views/User/UserList.vue＂
　　解决完，还特意试了一下，加上【.vue】就没问题，去掉【.vue】就白屏+报错，真是坑了~，后来听同学说：要加.vue是因为你的user目录下对应的不是index，嗯，这样的解释理解的更透彻了！