Vue 配合eiement动态路由,权限验证的方法

1.要实现动态路由，只需要在main.js中将所有路由表先规定好，如下

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

const routes=[   {path: '/login' ,component:login}, /*登录*/      {path: '/home' ,component:home}, /*首页*/   {path: '/monitor' ,component:monitor}, /*实时监控*/   {path: "/orderQuery" , component: orderQuery}, /*电子围栏*/   {path: "/fenceSet" , component: fenceSet}, /*电子围栏*/      {path: '/orderCenter' ,component:orderCenter}, /*订单中心*/   {path: '/carctlExamine' ,component:carctlExamine}, /*车管员审批*/   {path: '/partExamine' ,component:partExamine}, /*部门领导审批*/   {path: '/vpExamine' ,component:vpExamine}, /*副总审批*/      {path: '/distribute' ,component:distribute}, /*调度派单*/   {path: '/receipt' ,component:receipt}, /*回执*/      {path: '/trajectory' ,component:trajectory}, /*轨迹回放*/   {path: '/statistics' ,component:statistics }, /*统计*/      {path: '/car' ,component:car}, /*车辆管理*/   {path: '/user' ,component:user}, /*用户管理*/   {path: '/equipment' ,component:equipment}, /*设备管理*/   {path: '/group' ,component:group}, /*小组维护*/   {path: '/driver' ,component:driver}, /*驾驶员管理*/      {path: '/company' , component: company}, /*公司管理*/   {path: '/adminManage' , component: adminManage}, /*公司员管理*/   {path: '/roleManage' , component: roleManage}, /*角色管理*/   {path: '/systemDaily' ,component:systemDaily }, /*系统日志*/          ];

2.把前端路由表发给后台和后台协商返回的数据形式，在app.vue中，使用《el=menu》循环出来后台返回的路由表如下

前端精品教程：百度网盘下载

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<el-menu   : default -active= "$route.path"   class= "el-menu-demo"   mode= "horizontal"   @select= "handleSelect"   background-color= "#545c64"   text-color= "#fff"   active-text-color= "#85ffca" >     <el-menu-item :index= "item.path" v- for = "item in pathList"       v- if = "item.path!=null" :key= "item.id" >   <router-link :to= "item.path" >{{item.name}}</router-link>   </el-menu-item> /*一级导航*/     <el-submenu v- if = "item.path==null" :key= "item.id" :index= "item.name" v- for = "item in pathList" >   <template slot= "title" >{{item.name}}</template>     <el-menu-item v- for = "child in item.children" :index= "child.path"    :key= "child.id" v- if = "child.path!=null" > /*二级导航*/    <router-link :to= "child.path" >{{child.name}}</router-link>     </el-menu-item>   <el-submenu v- if = "child.children!=[]&&child.path==null" v- for = "child in item.children" :key= "child.id" :index= "child.name" >    <template slot= "title" >{{child.name}}</template>    <el-menu-item v- for = "three in child.children" :index= "three.path" :key= "three.id" > /*若存在三级导航*/    <router-link :to= "three.path" >{{three.name}}</router-link>    </el-menu-item>   </el-submenu>     </el-submenu>   </el-menu>

这样就可以在登录的时候根据接口获取到当前用户所拥有的权限以及路由表，这样动态路由就做好了 。我们是根据页面来确定权限的，没有页面就代表没有权限无法查看页面。

转载于:https://www.cnblogs.com/zd-aw123/p/9810787.html