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 反科里化 this [译]
Sep 20 Javascript
如何设置iframe高度自适应在跨域情况下的可用方法
Sep 06 Javascript
toggle一个div显示或隐藏且可扩展成自定义下拉框
Sep 12 Javascript
jQuery实现鼠标移到元素上动态提示消息框效果
Oct 20 Javascript
jQuery切换网页皮肤并保存到Cookie示例代码
Jun 16 Javascript
Javascript限制网页只能在微信内置浏览器中访问
Nov 09 Javascript
jQuery插件实现可输入和自动匹配的下拉框
Oct 24 Javascript
vue上传图片到oss的方法示例(图片带有删除功能)
Sep 27 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
JS中的const命令你真懂它吗
Mar 08 Javascript
vue大型项目之分模块运行/打包的实现
Sep 21 Javascript
Vue通过懒加载提升页面响应速度
May 10 Vue.js
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字符串函数的总结分析
2013/06/05 PHP
curl实现站外采集的方法和技巧
2014/01/31 PHP
php截取字符串之截取utf8或gbk编码的中英文字符串示例
2014/03/12 PHP
PDO::quote讲解
2019/01/29 PHP
laravel 框架执行流程与原理简单分析
2020/02/01 PHP
PHP代码加密的方法总结
2020/03/13 PHP
Javascript实例教程(19) 使用HoTMetal(7)
2006/12/23 Javascript
javascript parseInt 函数分析(转)
2009/03/21 Javascript
当json键为数字时的取值方法解析
2013/11/15 Javascript
NodeJS中利用Promise来封装异步函数
2015/02/25 NodeJs
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
2016/11/07 Javascript
sea.js常用的api简易文档
2016/11/15 Javascript
Django1.7+JQuery+Ajax验证用户注册集成小例子
2017/04/08 jQuery
node.js基于socket.io快速实现一个实时通讯应用
2019/04/23 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
python结合API实现即时天气信息
2016/01/19 Python
Python学习入门之区块链详解
2017/07/25 Python
python3学习笔记之多进程分布式小例子
2018/02/13 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
Python直接赋值、浅拷贝与深度拷贝实例分析
2019/06/18 Python
Golang GBK转UTF-8的例子
2019/08/26 Python
Python 正则表达式爬虫使用案例解析
2019/09/23 Python
Python爬取爱奇艺电影信息代码实例
2019/11/26 Python
Pytorch 使用opnecv读入图像由HWC转为BCHW格式方式
2020/06/02 Python
opencv 查找连通区域 最大面积实例
2020/06/04 Python
CSS3 实现的火焰动画
2020/12/07 HTML / CSS
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
体育学院毕业生自荐信
2013/11/03 职场文书
幼儿园安全检查制度
2014/01/30 职场文书
《十六年前的回忆》教学反思
2014/02/14 职场文书
竞选宣传委员演讲稿
2014/05/24 职场文书
物流管理专业推荐信
2014/09/06 职场文书
体育个人工作总结
2015/02/09 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python