bootstrap table传回的数据后端怎么获取_vue如何根据后端返回的路由数据生成导航...

vue如何根据后端返回的路由数据生成导航

根据不同的路由生成不同的导航，也叫做vue动态路由。vue项目实现动态路由的方式大体可分为两种:

1. 前端控制路由:前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由

2. 后端处理路由:后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理

这两种方法各有优点，效果都能实现，我是通过第二中种方法实现的，原因就是项目里有一个专门的用户中心，里边逻辑很复杂，不好返给前端用户权限。

01

整体思路

拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

02

路由表

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，上边头部导航、右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;
路由应该是数组格式。

{       

 "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"
           }
         }
       ]
     },

02

使用beforeEach、addRoutes、localStorage来配合实现

var getRouter //用来获取后台拿到的路由

router.beforeEach((to, from, next) => {  if (!getRouter) {//不加这个判断，路由会陷入死循环
   if (!getObjArr('router')) {

axios

.get('https://www.easymock.com/mock/5a5d

a330d9b48c260cb42ca8/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()
 }
})

03

拿到遍历好的路由，进行左侧菜单渲染

边第三部会给 global.antRouter赋值，这是一个

全局变量(可以用vuex替代)，菜单那边拿到路

由，进行渲染.

 

:index="menu.Url" >

          {{menu.Name}}

:index="menuChild.Url" 

style="padding-left: 60px;">{{menuChild.Name}}