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

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

核心方法: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 addRoutes路由动态加载的更多相关文章

  1. angular 路由动态加载JS文件

    纯属分享 //把下面代码放在新建JS文件里,引入在头部 //angural路由功能--一个路由动态加载JS (function (name, context, definition) { if (ty ...

  2. vue路由动态加载

    注意:是动态加载不是动态路由 解决的问题: 动态配置菜单栏的路由参数--实现菜单级的权限控制 问题成因: 在vue实例化的时候vuex.vue-router 就需要加载完毕,无法使用异步的方式从服务器 ...

  3. Vue 路由懒加载, VueRouter一步完成Vue的路由懒加载 一行代码搞定懒加载

    Vue Router路由配置中的component里面配置即可 1 // 路由懒加载的方式加载组件 2 3 component: () => import('@/views/Detail'), ...

  4. vue的路由懒加载

    路由懒加载官方介绍 非懒加载写法: import Login from '@/components/Login' 所有路由涉及到的文件会被打包到 app.xxx.js 中 懒加载写法: const L ...

  5. vue中路由懒加载实现amd加载文件

    一般我们配置路由的时候是import引入: import log from '@/components/login': { path: '/login', component: log , hidde ...

  6. 实现react路由动态加载的组件

    import React, { Component } from 'react'; import Loading from '../../base/nc_Loading'; /* * date: 20 ...

  7. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  8. Vue + Element UI 实现权限管理系统(动态加载菜单)

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  9. vue项目性能优化(路由懒加载、gzip加速、cdn加速)

    前端工程性能优化一说意义深远悠长,本章主要介绍除了一些基础优化外如何实行路由懒加载.Gzip加速.CDN加速,让网页飞的快一些. 基础优化 老生常谈的一些: 不要在模板中写复杂的表达式 慎用watch ...

随机推荐

  1. 初学单片机:Proteus介绍、Proteus与Keil联调(Windows10环境下)

    Proteus是一个仿真软件,可以在里面设计电路并模拟测试,也可生成PCB的布线等等,反正就是强大的不行.初学单片机,除了开发板,这个仿真器就是一个很好的调式环境.软件安装信息: Proteus 8. ...

  2. Selenium学习之==>Css Selector使用方法

    一.什么是Css Selector Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器后,下载插件,FireFinder ...

  3. oracle 迁移数据文件

    步骤: 1.SQL>SELECT FILE_NAME FROM DBA_DATA_FILES; FILE_NAME --------------------------------------- ...

  4. office问题解决办法汇总

    1.Office2007或2010提示:您正试图运行的函数包含有宏或需要宏语言支持的内容 解决办法:word选项--加载项--管理com加载项--转到--把所有加载项删除 2.excel2010打开三 ...

  5. 密码学 - MD5 - 生成|加密|解密|相关工具

    生成MD5 解密 工具 - findmyhash使用方法:-h 直接跟hash值 -f 指定hash文件 -g 通过google查找hash 加密方式识别工具 hash-identifier 支持识别 ...

  6. 【Linux开发】全面的framebuffer详解

    全面的framebuffer详解 一.FrameBuffer的原理 FrameBuffer 是出现在 2.2.xx 内核当中的一种驱动程序接口. Linux是工作在保护模式下,所以用户态进程是无法象D ...

  7. 关于SQL连接语句中的Integrated Security=SSPI/ture/false

    解决方法:即:Security Support Provider Interface设置Integrated Security为 True 的时候,连接语句前面的 UserID, PW 是不起作用的, ...

  8. vue router应用及总结

    编写一个小的demo,对router基础的应用学习和理解. 效果图示: 说明: 点击About在右边显示相关信息. 说明: 点击Home,在下边显示相关信息,且Home下有两个路由链接,分别对应各自的 ...

  9. 使用foreach一次性添加多个单选按钮

    <?php //这个函数创建一个单选按钮 //函数接收一个论据:值 //函数也会让按钮有"黏性"-->记住你是如何填写它的. function create_radio ...

  10. tensorflow学习笔记七----------卷积神经网络

    卷积神经网络比神经网络稍微复杂一些,因为其多了一个卷积层(convolutional layer)和池化层(pooling layer). 使用mnist数据集,n个数据,每个数据的像素为28*28* ...