vue addRoutes路由动态加载操作


Posted in Javascript onAugust 04, 2020

需求:增加权限控制,实现不同角色显示不同的路由导航

思路:每次登陆后请求接口返回当前角色路由

核心方法:vue-router2.2.0的addRoutes方法 + vuex

以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失。同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中

获取菜单之前先判断routerState,避免多次请求, 我这里使用element-ui的导航菜单功能v-for循环this.myRouter参数即可显示动态路由导航

/**
* 获取菜单
*/
getMenu () {
 if (this.$store.getters.routerState === false) {
 // 清理已经存在的动态路由
 this.clearDynamicRoute()
 // 更改请求路由状态为true
 this.$store.commit('SET_ROUTERSTATE', true)
 getMyMenu().then((res) => {
  if (res.code === '0') {
  // 格式化路由,将数据转为addRoutes可接受的route格式数组
  let myMenu = this.formatMenu(res.data.menu)
  if (myMenu.length <= 0) { // 没有动态路由
   return
  }
  for (let index = 0; index < myMenu.length; index++) {
   // 将请求的路由先存放到options对象中
   this.$router.options.routes.push(myMenu[index])
  }
  // 将完整需要显示的路由添加进去
  this.$router.addRoutes(this.$router.options.routes)
  // 这里将路由显示在页面上
  this.MyRouter = this.$router.options.routes
  }
  // 在这里就可以打印出新路由
  console.log(this.$router)
 })
 }
}

补充知识:vue+element 进入不同路由页面(二级页面),让相应的左侧菜单

路由配置

{
 path: '/finance',
 name: 'Finance',
 meta: {
 title: '财务'
 },
 component: () =>
 import('@/components/Finance'),
 redirect: '/finance/code/code',
 children: [{
 path: '/finance/code',
 name: 'financeindex',
 meta: {
 title: '税收配置'
 },
 redirect: '/finance/code/code',
 component: () =>
 import('@/components/finance/financeindex'),
 children: [{
 path: '/finance/code/code',
 name: 'FinanceCode',
 hidden: false,
 active:'/finance/code', //这里是在左侧菜单显示并且需要选中的
 meta: {
  title: '税收编码(金税)'
 },
 component: () =>
  import('@/components/finance/code/Code'),
 },
 {
 path: '/finance/code/codeimportrecord',  // 这个路由进入的界面是 税收编码(金税)的二级页面, 当进入这个页面的时候,需要菜单中的税收编码(金税)显示选中
 name: 'FinanceCodeImportRecord',
 hidden: true,
 meta: {
 title: '税收编码导入记录'
 },
 component: () =>
 import('@/components/finance/code/CodeImportRecord'),
 },
 {
 path: '/finance/classcode/classcode',
 name: 'FinanceClassCode',
 hidden: false,
 active:'/finance/classcode', //为了省事,只给需要在左侧显示的路由添加active属性
 meta: {
  title: '分类税收编码确认'
 },
 component: () =>
  import('@/components/finance/classCode/ClassCode'),
 },
 ]
 }, ]

element

<template>
 <div class="leftnav">
 <!--<div class="" v-for="nav in navs">
   <div class="LiHeader">
    {{nav.name}}
   </div>
   <li v-for="item in nav.san">
    {{item.name}}
   </li>
  </div>-->
 <el-menu
  style="text-align: left;"
  :default-active=this.show // 这是的值是指与 el-menu-item中:index的值对应的那一天显示选中(正常情况就是一个页面一个路由,进入那个路由,对应的导航菜单需要选中)
  class="el-menu-vertical-demo"
  @open="handleOpen"
  @close="handleClose"
  background-color="#282b33"
  text-color="#bcbcbc"
  active-text-color="#ffffff">
  <div class="" v-for="(nav,index) in navs" :key="index" style="width: 200px;">
  <div class="" style="color: #ffffff;height: 40px;line-height: 40px;padding-left: 20px;font-size: 16px;">
   {{nav.meta.title}}
  </div>
  <el-menu-item @click="clickroute(item.path)" v-for="(item,index) in nav.children" v-if="!item.hidden" :key="index" :index="item.active"(这里原来是item.path) style="height: 40px;line-height: 40px;">{{item.meta.title}}</el-menu-item>
  </div>

 </el-menu>
 </div>
</template>
<script>

js

data() {
  return {
  navs:[],
  show:null //初始化上面:default-active绑定的值
  }
 },
 created() { //// 页面载入的时候,拿到url,用/拆开,然后拼起来前两个路径,并且赋值, 这个时候show对应的就是路由表中的 avtive,
  let route=this.$route.path.split('/')
  let vueRouter=this.$router.options.routes.filter(router=>{return router.path=='/'})[0].children
  let filterVuerouter=vueRouter.filter(router=>{return '/'+route[1] == router.path })
  this.navs=filterVuerouter[0].children
  console.log(this.navs)

  let router ='/'+route[1]+'/'+route[2]
 console.log(router)
  this.show=router
//  console.log(this.show)
 },
 mounted() {

 },

以上这篇vue addRoutes路由动态加载操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript的键盘控制事件说明
Apr 15 Javascript
JavaScript组合拼接字符串的效率对比测试
Nov 06 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
使用JavaScript为Kindeditor自定义按钮增加Audio标签
Mar 18 Javascript
Dojo获取下拉框的文本和值实例代码
May 27 Javascript
对javascript继承的理解
Oct 11 Javascript
基于JavaScript实现前端文件的断点续传
Oct 17 Javascript
JavaScript中值类型和引用类型的区别
Feb 23 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
Jun 12 jQuery
Vue AST源码解析第一篇
Jul 19 Javascript
vue2路由方式--嵌套路由实现方法分析
Mar 06 Javascript
微信小程序实现modal弹出框遮罩层组件(可带文本框)
Dec 20 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
Aug 04 #Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
Aug 04 #Javascript
vue 解决uglifyjs-webpack-plugin打包出现报错的问题
Aug 04 #Javascript
浅谈在vue-cli3项目中解决动态引入图片img404的问题
Aug 04 #Javascript
解决vuecli3中img src 的引入问题
Aug 04 #Javascript
简介JavaScript错误处理机制
Aug 04 #Javascript
vue 出现data-v-xxx的原因及解决
Aug 04 #Javascript
You might like
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
用PHP ob_start()控制浏览器cache、生成html实现代码
2010/02/16 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
ThinkPHP中使用Ueditor富文本编辑器
2015/09/02 PHP
PHP实现的二分查找算法实例分析
2017/12/19 PHP
JavaScript中数组对象的那些自带方法介绍
2013/03/12 Javascript
js实现拉伸拖动iframe的具体代码
2013/08/03 Javascript
js控制元素显示在屏幕固定位置及监听屏幕高度变化的方法
2015/08/11 Javascript
基于JS实现无缝滚动思路及代码分享
2016/06/07 Javascript
JS留言功能的简单实现案例(推荐)
2016/06/23 Javascript
微信小程序 wx.request(object) API详解及实例代码
2016/09/30 Javascript
Bootstrap基本插件学习笔记之折叠(22)
2016/12/08 Javascript
浅谈nodejs中的类定义和继承的套路
2017/07/26 NodeJs
初探JavaScript 面向对象(推荐)
2017/09/03 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
vue.draggable实现表格拖拽排序效果
2018/12/01 Javascript
详解小程序云开发攻略(解决最棘手的问题)
2019/09/30 Javascript
[41:12]Liquid vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第一场 8.24
2019/09/10 DOTA
python+pyqt实现右下角弹出框
2017/10/26 Python
python根据txt文本批量创建文件夹
2020/12/08 Python
使用celery和Django处理异步任务的流程分析
2020/02/19 Python
python读取hdfs上的parquet文件方式
2020/06/06 Python
电子商务专业个人的自我评价
2013/12/19 职场文书
通信工程专业毕业生推荐信
2013/12/25 职场文书
个人求职信范文分享
2014/01/06 职场文书
销售人员职业生涯规划范文
2014/03/01 职场文书
婚前财产公证书
2014/04/10 职场文书
安全教育月活动总结
2014/05/05 职场文书
文秘自荐信
2014/06/28 职场文书
领导干部查摆“四风”问题自我剖析材料思想汇报
2014/10/05 职场文书
承诺函格式模板
2015/01/21 职场文书
简历自我评价优缺点
2015/03/11 职场文书
会议主持人开场白台词
2015/05/28 职场文书
nginx反向代理时如何保持长连接
2021/03/31 Servers
基于CSS3画一个iPhone
2021/04/21 HTML / CSS