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 相关文章推荐
JavaScript Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
js借助ActiveXObject实现创建文件
Sep 29 Javascript
利用js动态添加删除table行的示例代码
Dec 16 Javascript
JS对话框_JS模态对话框showModalDialog用法总结
Jan 11 Javascript
谈一谈JS消息机制和事件机制的理解
Apr 14 Javascript
Highcharts入门之基本属性
Aug 02 Javascript
javascript 中iframe高度自适应(同域)实例详解
May 16 Javascript
vue组件学习教程
Sep 09 Javascript
JS实现登录页密码的显示和隐藏功能
Dec 06 Javascript
Vue中添加手机验证码组件功能操作方法
Dec 07 Javascript
react 兄弟组件如何调用对方的方法示例
Oct 23 Javascript
详解关于Vuex的action传入多个参数的问题
Feb 22 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制作简单模版引擎
2016/04/07 PHP
PHP判断JSON对象是否存在的方法(推荐)
2016/07/06 PHP
PHP 年月日的三级联动实例代码
2017/05/24 PHP
php+js实现点赞功能的示例详解
2020/08/07 PHP
特殊字符、常规符号及其代码对照表
2006/06/26 Javascript
Mootools 1.2教程 输入过滤第一部分(数字)
2009/09/15 Javascript
js分解url参数(面向对象-极简主义法应用)
2012/08/09 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
基于mouseout和mouseover等类似事件的冒泡问题解决方法
2013/11/18 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
jQuery 如何先创建、再修改、后添加DOM元素
2014/05/20 Javascript
轻松搞定jQuery.noConflict()
2016/02/15 Javascript
[原创]jQuery常用的4种加载方式分析
2016/07/25 Javascript
使用PBFunc在Powerbuilder中支付宝当面付款功能
2016/10/01 Javascript
JavaScript基础——使用Canvas绘图
2016/11/02 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
2017/09/20 Javascript
ES6 class的应用实例分析
2019/06/27 Javascript
微信小程序 如何获取网络状态
2019/07/26 Javascript
Python操作json数据的一个简单例子
2014/04/17 Python
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
Python制作词云图代码实例
2019/09/09 Python
Python将列表中的元素转化为数字并排序的示例
2019/12/25 Python
基于Python fminunc 的替代方法
2020/02/29 Python
Python web如何在IIS发布应用过程解析
2020/05/27 Python
Bally巴利中国官网:经典瑞士鞋履、手袋及配饰奢侈品牌
2018/10/09 全球购物
医院办公室主任职责
2013/12/29 职场文书
简历里的自我评价
2014/01/31 职场文书
学校宣传标语
2014/06/18 职场文书
工作证明范本(2篇)
2014/09/14 职场文书
办理房产过户的委托书
2014/09/14 职场文书
销售人员工作自我评价
2014/09/21 职场文书
领导干部作风建设总结
2014/10/23 职场文书
2014年英语工作总结
2014/12/20 职场文书
家长通知书家长意见
2015/06/03 职场文书
详解vue身份认证管理和租户管理
2021/05/25 Vue.js
Python 第三方库 openpyxl 的安装过程
2022/12/24 Python