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 相关文章推荐
jQuery 常见操作实现方式和常用函数方法总结
May 06 Javascript
基于javascript实现泡泡大冒险网页版小游戏
Mar 23 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
Vuejs第八篇之Vuejs组件的定义实例解析
Sep 05 Javascript
详解AngularJs中$resource和restfu服务端数据交互
Sep 21 Javascript
遍历json 对象的属性并且动态添加属性的实现
Dec 02 Javascript
es6新特性之 class 基本用法解析
May 05 Javascript
JS获取并处理php数组的方法实例分析
Sep 04 Javascript
详解JavaScript 浮点数运算的精度问题
Jul 23 Javascript
layui使用form表单实现post请求页面跳转的方法
Sep 14 Javascript
微信小程序wx.request的简单封装
Nov 13 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
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
PHP逐行输出(ob_flush与flush的组合)
2012/02/04 PHP
PHP手机号中间四位用星号*代替显示的实例
2017/06/02 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
jQuery的each终止或跳过示例代码
2013/12/12 Javascript
javascript判断两个IP地址是否在同一个网段的实现思路
2013/12/13 Javascript
JS中表单的使用小结
2014/01/11 Javascript
JavaScript中对象property的删除方法介绍
2014/12/30 Javascript
javascript密码强度校验代码(两种方法)
2015/08/10 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
js提交form表单,并传递参数的实现方法
2016/05/25 Javascript
Vue.JS入门教程之处理表单
2016/12/01 Javascript
Node.js连接mongodb实例代码
2017/06/06 Javascript
jQuery实现table中两列CheckBox只能选中一个的示例
2017/09/22 jQuery
react-native-fs实现文件下载、文本存储的示例代码
2017/09/22 Javascript
React中如何引入Angular组件详解
2018/08/09 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
JS实现秒杀倒计时特效
2020/01/02 Javascript
[08:08]DOTA2-DPC中国联赛2月28日Recap集锦
2021/03/11 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Django发送html邮件的方法
2015/05/26 Python
Django应用程序中如何发送电子邮件详解
2017/02/04 Python
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
用pycharm开发django项目示例代码
2018/10/24 Python
详解pyenv下使用python matplotlib模块的问题解决
2018/11/29 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
Python爬虫过程解析之多线程获取小米应用商店数据
2020/11/14 Python
python 利用panda 实现列联表(交叉表)
2021/02/06 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
IE下实现类似CSS3 text-shadow文字阴影的几种方法
2011/05/11 HTML / CSS
利用CSS3实现的文字定时向上滚动
2016/08/29 HTML / CSS
如何手工释放资源
2013/12/15 面试题
小学生常见病防治方案
2014/06/06 职场文书
股份合作协议书
2014/09/10 职场文书
销售顾问工作计划书
2014/09/15 职场文书
优秀英文求职信范文
2015/03/19 职场文书
初中团支书竞选稿
2015/11/21 职场文书