解决vue addRoutes不生效问题

 更新时间:2020年08月04日 14:50:35   作者:高远321  
这篇文章主要介绍了解决vue addRoutes不生效问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

补充知识: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. 但是在退出登录后,重新登录,打开控制台, 满满的黄色警告 如图

意思就是路由发生了冲突, 这是因为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不生效问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中动态权限到按钮的完整实现方案详解

    Vue中动态权限到按钮的完整实现方案详解

    这篇文章主要为大家详细介绍了Vue如何在现有方案的基础上加入对路由的增、删、改、查权限控制,感兴趣的小伙伴可以跟随小编一起学习一下
    2025-03-03
  • 详解Vue.directive 自定义指令

    详解Vue.directive 自定义指令

    这篇文章主要介绍了Vue.directive 自定义指令,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • vue3二次封装element-ui中的table组件的过程详解

    vue3二次封装element-ui中的table组件的过程详解

    这篇文章主要给大家介绍了vue3二次封装element-ui中的table组件的过程,文中通过代码示例给大家介绍的非常详细,对大家的学习或工作有一定的帮助,需要的朋友跟着小编一起来学习吧
    2024-01-01
  • 如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

    如何巧用Vue.extend继承组件实现el-table双击可编辑(不使用v-if、v-else)

    这篇文章主要给大家介绍了关于如何巧用Vue.extend继承组件实现el-table双击可编辑的相关资料,不使用v-if、v-else,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-06-06
  • vue实现鼠标悬浮框效果

    vue实现鼠标悬浮框效果

    这篇文章主要为大家详细介绍了vue实现鼠标悬浮框,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue3生命周期原理与生命周期函数简单应用实例分析

    vue3生命周期原理与生命周期函数简单应用实例分析

    这篇文章主要介绍了vue3生命周期原理与生命周期函数,结合简单实例形式分析了vue3的生命周期基本原理、以及各个阶段的生命周期钩子函数功能、使用技巧与相关注意事项,需要的朋友可以参考下
    2023-04-04
  • 9102年webpack4搭建vue项目的方法步骤

    9102年webpack4搭建vue项目的方法步骤

    这篇文章主要介绍了9102年webpack4搭建vue项目的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-02-02
  • vueJS简单的点击显示与隐藏的效果【实现代码】

    vueJS简单的点击显示与隐藏的效果【实现代码】

    下面小编就为大家带来一篇vueJS简单的点击显示与隐藏的效果【实现代码】。小编觉得挺不错的,现在分享给大家,一起跟随小编过来看看吧
    2016-05-05
  • 浅谈Vue数据响应思路之数组

    浅谈Vue数据响应思路之数组

    这篇文章主要介绍了浅谈Vue数据响应思路之数组,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-11-11
  • vue3.2 reactive函数问题小结

    vue3.2 reactive函数问题小结

    reactive用来包装一个对象,使其每个对象属性都具有响应性(也就是深层次响应式),这篇文章主要介绍了vue3.2 reactive函数注意点及问题小结,需要的朋友可以参考下
    2022-12-12

最新评论