解决vue addRoutes不生效问题


Posted in Javascript onAugust 04, 2020

动态添加导航栏时,addRoutes不生效解觉

1、在addroutes前,使用router.options.routes=XXXXX的方法手动添加

2、使用作者的方法,在store里维护一个routes对象,然后使用这个对象遍历生成侧面导航栏

解决vue addRoutes不生效问题

补充知识:vue-router 动态添加路由 router.addRoutes(routes)遇到的二次登陆路由冲突问题解决

起因

在当前项目中使用的iview-admin,路由要根据权限动态生成,是在登录后获取当前用户权限内的路由使用 vue-router 的 addRoutes() 方法动态添加到路由表中

遇到的问题

项目目录

...
router
index.js // 路由主配置,路由守卫等
routers.js // 存放页面整体布局和无需权限的路由
store
modules
app.js // 项目通用vuex状态、mutation action等模块
user.js // 用户模块的
index.js // vuex  store的主入口

在router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import routers from './routers' // 导出了路由配置数组项
Vue.use(Router)
const router = new Router({
routers,
mode: 'history'
})
export default router

store/modules/app.js

import router from '@/router' // @ 是src目录, 拿到路由对象
....
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由
```

此时,如上配置动态路由已经配置完成, 项目也能跑起来,控制台也不会报错和警告,感觉everything is so perfect. 但是在退出登录后,重新登录,打开控制台, 满满的黄色警告 如图

解决vue addRoutes不生效问题

意思就是路由发生了冲突, 这是因为addRoutes 给路由表中添加路由,当退出登录的时候vue实例并木有重新初始化,但是却重新又addRoutes了一次,如果登录的用户相同或者不同用户有同样的权限路由, 那么就会被直接在原来路由表基础上添加,那么自然就会发生路由冲突了,而此时如果刷新页面,vue实例重新初始化就没有这些警告,

问题来了

vue-router 只提供了addRoutes方法 却并没有提供 removeRoutes方法,那么该如何解决这个冲突呢?

解决方式

经过一番搜索与实践,找到了一种方式 , 重置router的matcher

首先修改router/idnex.js

// 原来的
const router = new Router({
routes,
mode: 'history'
})
export router
// 修改为
export const createRouter = (routers) => new Router({
routers,
mode: 'history'
})
const router = createRouter(routers)
export router

其次修改store/modules/app.js

// 原来的
import router from '@/router'
....
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由
// 修改为
import router, { createRouter } from '@/router'
import routers from '@/router/routers' // 无需配置的那些路由
...
router.matcher = createRouter(routers).matcher
router.addRoutes(routes) // routes 为登录后后台接口返回的动态路由, 在更新菜单menuList前调用
```

如此按照以上的方式即可解决这个问题

以上这篇解决vue addRoutes不生效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
关于jQuery UI 使用心得及技巧
Oct 10 Javascript
jquery创建一个ajax关键词数据搜索实现思路
Feb 26 Javascript
jquery实现控制表格行高亮实例
Jun 05 Javascript
JS for循环中i++ 和 ++i的区别介绍
Jul 20 Javascript
JS日程管理插件FullCalendar中文说明文档
Feb 06 Javascript
滚动条的监听与内容随着滚动条动态加载的实现
Feb 08 Javascript
vue-ajax小封装实例
Sep 18 Javascript
element-ui 上传图片后清空图片显示的实例
Sep 04 Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 Javascript
简单了解微信小程序的目录结构
Jul 01 Javascript
vue页面切换项目实现转场动画的方法
Nov 12 Javascript
vue 解决addRoutes多次添加路由重复的操作
Aug 04 #Javascript
Vue优化:常见会导致内存泄漏问题及优化详解
Aug 04 #Javascript
Jquery cookie插件实现原理代码解析
Aug 04 #jQuery
解决vue自定义指令导致的内存泄漏问题
Aug 04 #Javascript
vue中的v-model原理,与组件自定义v-model详解
Aug 04 #Javascript
详解JS深拷贝与浅拷贝
Aug 04 #Javascript
vue addRoutes路由动态加载操作
Aug 04 #Javascript
You might like
php判断输入是否是纯数字,英文,汉字的方法
2015/03/05 PHP
php 利用array_slice函数获取随机数组或前几条数据
2015/09/30 PHP
关于php几种字符串连接的效率比较(详解)
2017/02/22 PHP
PHP 实现字符串翻转(包含中文汉字)的实现代码
2017/04/01 PHP
WHOOPS PHP调试库的使用
2017/09/29 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
用jscript实现新建和保存一个word文档
2007/06/15 Javascript
JQuery datepicker 使用方法
2011/05/20 Javascript
jquery jqPlot API 中文使用教程(非常强大的图表工具)
2011/08/15 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
2012/02/02 Javascript
js中传递特殊字符(+,&)的方法
2014/01/16 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
2014/04/11 Javascript
微信分享的标题、缩略图、连接及描述设置方法
2014/10/14 Javascript
jQuery选择器源码解读(八):addCombinator函数
2015/03/31 Javascript
JavaScript中exec函数用法实例分析
2015/06/08 Javascript
nodejs 使用http进行post或get请求的实例(携带cookie)
2019/01/03 NodeJs
详解Python中dict与set的使用
2015/08/10 Python
轻松实现TensorFlow微信跳一跳的AI
2018/01/05 Python
Python生成器以及应用实例解析
2018/02/08 Python
Python编程深度学习绘图库之matplotlib
2018/12/28 Python
Python基本数据结构与用法详解【列表、元组、集合、字典】
2019/03/23 Python
Python占用的内存优化教程
2019/07/28 Python
python 计算两个列表的相关系数的实现
2019/08/29 Python
python 实现dict转json并保存文件
2019/12/05 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
加大码胸罩、内裤和服装:Just My Size
2019/03/21 全球购物
亚马逊加拿大网站:Amazon.ca
2020/01/06 全球购物
会计专业应届生自荐信
2014/02/07 职场文书
护士岗前培训自我评鉴
2014/02/28 职场文书
圣诞节开幕词
2015/01/29 职场文书
员工年度工作总结2015
2015/05/18 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
pytorch中的model=model.to(device)使用说明
2021/05/24 Python
SQL SERVER存储过程用法详解
2022/02/24 SQL Server
MySQL数据库完全卸载的方法
2022/03/03 MySQL