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 相关文章推荐
静态页面的值传递(三部曲)
Sep 25 Javascript
JQuery 学习笔记 element属性控制
Jul 23 Javascript
JQuery的Validation插件中Remote验证的中文问题
Jul 26 Javascript
javascript中全局对象的parseInt()方法使用介绍
Dec 19 Javascript
jquery中对于批量deferred的处理方法
Jan 22 Javascript
jQuery3.0中的buildFragment私有函数详解
Aug 16 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
基于vuejs+webpack的日期选择插件
May 21 Javascript
基于JavaScript实现百度搜索框效果
Jun 28 Javascript
angular.extend方法的具体使用
Sep 14 Javascript
js module大战
Apr 19 Javascript
20道JS原理题助你面试一臂之力(必看)
Jul 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
zend Framework中的Layout(模块化得布局)详解
2013/06/28 PHP
ThinkPHP之用户注册登录留言完整实例
2014/07/22 PHP
你所要知道JS(DHTML)中的一些技巧
2007/01/09 Javascript
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
jQuery Clone Bug解决代码
2010/12/22 Javascript
jQuery登陆判断简单实现代码
2013/04/21 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
JavaScript实现的一个计算数字步数的算法分享
2014/12/06 Javascript
jQuery的事件委托实例分析
2015/07/15 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
BootStrap实现手机端轮播图左右滑动事件
2016/10/13 Javascript
jQuery初级教程之网站品牌列表效果
2017/08/02 jQuery
Angularjs实现下拉框联动的示例代码
2017/08/22 Javascript
微信小程序 配置顶部导航条标题颜色的实现方法
2017/09/20 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
Vue resource三种请求格式和万能测试地址
2018/09/26 Javascript
JavaScript字符串处理常见操作方法小结
2019/11/15 Javascript
js回调函数仿360开机
2019/12/26 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
django foreignkey(外键)的实现
2019/07/29 Python
Django app配置多个数据库代码实例
2019/12/17 Python
Python响应对象text属性乱码解决方案
2020/03/31 Python
css3截图_动力节点Java学院整理
2017/07/11 HTML / CSS
CSS3盒子模型详解
2013/04/24 HTML / CSS
使用CSS Grid布局实现网格的流动
2014/12/30 HTML / CSS
后勤人员自我评价怎么写
2013/09/19 职场文书
医科大学生毕业的自我评价分享
2013/11/12 职场文书
大学生两会精神学习心得体会
2014/03/10 职场文书
2014年个人售房协议书
2014/10/30 职场文书
2015年毕业实习工作总结
2015/05/29 职场文书
2015年大学生暑期实习报告
2015/07/13 职场文书
使用redis生成唯一编号及原理示例详解
2021/09/15 Redis
基于HTML十秒做出淘宝页面
2021/10/24 HTML / CSS
JavaScript高级程序设计之基本引用类型
2021/11/17 Javascript