1.要实现动态路由,只需要在main.js中将所有路由表先规定好,如下
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》循环出来后台返回的路由表如下
<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>
这样就可以在登录的时候根据接口获取到当前用户所拥有的权限以及路由表,这样动态路由就做好了 。我们是根据页面来确定权限的,没有页面就代表没有权限无法查看页面。
以上这篇Vue 配合eiement动态路由,权限验证的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
暂无评论...
更新日志
2024年11月27日
2024年11月27日
- 凤飞飞《我们的主题曲》飞跃制作[正版原抓WAV+CUE]
- 刘嘉亮《亮情歌2》[WAV+CUE][1G]
- 红馆40·谭咏麟《歌者恋歌浓情30年演唱会》3CD[低速原抓WAV+CUE][1.8G]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[320K/MP3][193.25MB]
- 【轻音乐】曼托凡尼乐团《精选辑》2CD.1998[FLAC+CUE整轨]
- 邝美云《心中有爱》1989年香港DMIJP版1MTO东芝首版[WAV+CUE]
- 群星《情叹-发烧女声DSD》天籁女声发烧碟[WAV+CUE]
- 刘纬武《睡眠宝宝竖琴童谣 吉卜力工作室 白噪音安抚》[FLAC/分轨][748.03MB]
- 理想混蛋《Origin Sessions》[320K/MP3][37.47MB]
- 公馆青少年《我其实一点都不酷》[320K/MP3][78.78MB]
- 群星《情叹-发烧男声DSD》最值得珍藏的完美男声[WAV+CUE]
- 群星《国韵飘香·贵妃醉酒HQCD黑胶王》2CD[WAV]
- 卫兰《DAUGHTER》【低速原抓WAV+CUE】
- 公馆青少年《我其实一点都不酷》[FLAC/分轨][398.22MB]
- ZWEI《迟暮的花 (Explicit)》[320K/MP3][57.16MB]