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


Posted in Javascript onSeptember 26, 2018

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动态路由,权限验证的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS获取父节点方法
Aug 20 Javascript
js function使用心得
May 10 Javascript
3种不同方式的焦点图轮播特效分享
Oct 30 Javascript
jQuery获取(选中)单选,复选框,下拉框中的值
Feb 21 Javascript
pace.js页面加载进度条插件
Sep 29 Javascript
深入理解jQuery之事件移除
Jun 02 Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 Javascript
使用snowfall.jquery.js实现爱心满屏飞的效果
Jan 05 Javascript
JS变量中有var定义和无var定义的区别以及es6中let命令和const命令
Feb 19 Javascript
JS实现css hover操作的方法示例
Apr 07 Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 Javascript
layui使用label标签的方法
Sep 14 Javascript
react-navigation之动态修改title的内容
Sep 26 #Javascript
React项目动态设置title标题的方法示例
Sep 26 #Javascript
Vue resource三种请求格式和万能测试地址
Sep 26 #Javascript
JS返回页面时自动回滚到历史浏览位置
Sep 26 #Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
Sep 26 #Javascript
解决vuejs 使用value in list 循环遍历数组出现警告的问题
Sep 26 #Javascript
深入理解react-router 路由的实现原理
Sep 26 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
php中全局变量global的使用演示代码
2011/05/18 PHP
smarty半小时快速上手入门教程
2014/10/27 PHP
Yii实现多数据库主从读写分离的方法
2014/12/29 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
php使用redis的有序集合zset实现延迟队列应用示例
2020/02/20 PHP
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
2011/11/18 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
2016/05/10 Javascript
js+html5实现canvas绘制椭圆形图案的方法
2016/05/21 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
mpvue中使用flyjs全局拦截的实现代码
2018/09/13 Javascript
layui自己添加图片按钮并点击跳转页面的例子
2019/09/14 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
2019/12/29 Javascript
详解Vue的watch中的immediate与watch是什么意思
2019/12/30 Javascript
原理深度解析Vue的响应式更新比React快
2020/04/04 Javascript
Python实现的中国剩余定理算法示例
2017/08/05 Python
CentOS6.9 Python环境配置(python2.7、pip、virtualenv)
2019/05/06 Python
python实现得到当前登录用户信息的方法
2019/06/21 Python
Python+Pyqt实现简单GUI电子时钟
2021/02/22 Python
python+selenium+chrome实现淘宝购物车秒杀自动结算
2021/01/07 Python
HTML5 input新增type属性color颜色拾取器的实例代码
2018/08/27 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
结构和类有什么异同
2012/07/16 面试题
C#的几个面试问题
2016/05/22 面试题
安全员岗位职责
2013/11/11 职场文书
竞选演讲稿范文
2013/12/28 职场文书
12月小学生校园广播稿
2014/02/04 职场文书
迟到检讨书300字
2014/02/14 职场文书
园林设计专业毕业生求职信
2014/03/23 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
2014年城管工作总结
2014/11/20 职场文书
2015年幼儿教育工作总结
2015/07/24 职场文书
升学宴家长答谢词
2015/09/29 职场文书
完美解决golang go get私有仓库的问题
2021/05/05 Golang
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang