vue 解决addRoutes多次添加路由重复的操作

我就废话不多说了，大家还是直接看代码吧~

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)

const createRouter = () => new Router({
 mode: 'history',
 routes: []
})

const router = createRouter()

export function resetRouter () {
 const newRouter = createRouter()
 router.matcher = newRouter.matcher // the relevant part
}

export default router

找老外的文档解决的问题，在登出的模块调用resetRouter方法，把原来的路由替换。

补充知识：vue中 做权限管理 使用router.addRoutes()动态添加路由以及解决刷新失效，跳转后刷新失效问题

最近在公司做知识储备，有个权限的问题干扰了我2天，今天终于把他理顺了！！！

一、需求明确

我想做的是后台管理系统的权限管理，（所有的数据都是使用mockJs模拟得来），登录的时候，发送表单验证，验证成功后，后台返回权限列表，权限不同，返回的列表不同，拿到权限列表后，把权限列表渲染出来在页面侧边栏上。

二、注意点

（1） 前端提前设置静态的权限列表，通常只包括页面公共的部分，比如 login。

（2）前端提前定义所有的权限列表，将其定义为一个数组，该数组中包含所有的权限。

（3）后台返回的数据是该用户拥有的所有权限列表，一般写成路由形式，但只包含name即可，如：

{
  "code": 0,
  "message": "获取权限成功",
  "data": [
    {
      "name": "订单管理",
      "children": [
        {
          "name": "订单列表"
        },
        {
          "name": "生产管理",
          "children": [
            {
              "name": "生产列表"
            }
          ]
        },
        {
          "name": "退货管理"
        }
      ]
    }
  ]
}

三、思路与实现

（1）当用户点击登录的时候，验证成功后，可以获取当前用户的id（token）存储到sessionStorage中。

（2）根据 '后台返回的权限列表（getList）'，去比对 '我们提前定义好的权限列表（powerList）'，然后得出 '应该动态添加的权限列表（list）' ，并存放到vuex中，最后执行addRoutes把比对出来的权限路由列表动态添加到路由中即可。

（3）进入home页面，渲染侧边栏。

四、问题

（1）vuex中数据存储在内存中，刷新后失效需要重新获取。因此会出现动态页面失效问题。我们需要根据是否为刷新页面来重新加载即可。

（2）进入动态加载的页面，然后再刷新，也会出现上面的情况

五、解决方法

在router的全局导航守卫beforeEach中设置，根据vuex中是否有list 来判断是否为刷新页面，如果有那么是第一次登陆， 如果没有，那么就为刷新页面，需要重新执行即可。

getRoutes就是执行路由对比，然后执行addRoutes的函数，因为其中有获取后台的路由列表这一步，为异步操作，所以应该放在action中

以上这篇vue 解决addRoutes多次添加路由重复的操作就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • Vue Router 实现动态路由和常见问题及解决方法

    个人理解:动态路由不同于常见的静态路由,可以根据不同的「因素」而改变站点路由列表.常见的动态路由大都是用来实现:多用户权限系统不同用户展示不同导航菜单. 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种: 前端将全部路由规定好,登录时根据用户角色权限来动态展示路由: 路由存储在数据库中,前端通过接口获取当前用户对应路由列表并进行渲染: 第一种方式在很多Vue UI Admin上都实现了,可以去读一下他们的源码理解具体的实现思路,这里就不过多展开.第二种方式现

  • vue-router之解决addRoutes使用遇到的坑

    最近项目中使用了vue-router的addRoutes这个api,遇到了一个小坑,记录总结一下. 场景复现: 做前端开发的同学,大多都遇到过这种需求:页面菜单根据用户权限动态生成,一个常见的解决方案是: 前端初始化的时候,只挂载不需要权限路由,如登陆,注册等页面路由,然后等用户登录之后,后端返回当前用户的权限表,前端根据这个权限表遍历前端路由表,动态生成用户权限路由,然后使用vue-router提供的addRoutes,将权限路由表动态添加到路由实例中,整个过程大致如下: // router.

  • vue后台管理之动态加载路由的方法

    vue后台管理之动态加载路由的方法

    在这里我们将会实现一个vue动态路由的案列,当用户登陆成功后,根据用户的角色,拿到他对应的菜单信息,并将它动态的载入到我们的路由中. 我们的通用的后台管理系统中,我们会根据权限的粗细不同,会对每个角色每个权限每个资源进行控制.同样的我们也需要实现一个这样的功能. 这篇文章我将主要讲vue端的实现,关于后台接口我就不会涉及,当我接触的时候我们的后台接口是springcloud实现. 一.思路 在vue-router对象中首先初始化公共路由,比如(404,login)等,然后在用户登陆成功,根据用户

  • vue addRoutes路由动态加载操作

    需求:增加权限控制,实现不同角色显示不同的路由导航 思路:每次登陆后请求接口返回当前角色路由 核心方法:vue-router2.2.0的addRoutes方法 + vuex 以下是我实现的获取菜单路由的方法,我将该方法的调用放在首页组件的生命钩子中,即便用户刷新浏览器清空了路由还是会重新调用接口获取,不至于会丢失.同时考虑到会有切换用户的可能,所以不将获取到的路由信息保存到cookie或者localstorage当中 获取菜单之前先判断routerState,避免多次请求, 我这里使用eleme

  • vue 解决addRoutes动态添加路由后刷新失效问题

    vue 解决addRoutes动态添加路由后刷新失效问题

    前言 某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用户a登录进系统,页面上有个按钮,点击之后会动态添加路由并且跳转,跳转过去之后,用户刷新后也会停留在当前页面. 不点这个按钮,浏览器输入地址,用户会跳到404页面 github:https://github.com/Mrblackant/keepRouter/tree/master 思路 1.用户点击

  • vue 解决addRoutes多次添加路由重复的操作

    我就废话不多说了,大家还是直接看代码吧~ import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) const createRouter = () => new Router({ mode: 'history', routes: [] }) const router = createRouter() export function resetRouter () { const newRouter = createR

  • Vue 解决父组件跳转子路由后当前导航active样式消失问题

    举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的问题,如下图: style代码: .router-link-exact-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important; } router.js代码

  • 解决vue路由name同名,路由重复的问题

    在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', component: () => import('@/components/index').then(m => m.default) },{ path: '/index', name: 'index', component: () => import('@/components/index').then(

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • Vue 动态添加路由及生成菜单的方法示例

    写后台管理系统,估计有不少人遇过这样的需求:根据后台数据动态添加路由和菜单. 为什么这么做呢?因为不同的用户有不同的权限,能访问的页面是不一样的. 在网上找了好多资料,终于想到了解决办法. 动态生成路由 利用 vue-router 的 addRoutes 方法可以动态添加路由. 先看一下官方介绍: router.addRoutes router.addRoutes(routes: Array<RouteConfig>) 动态添加更多的路由规则.参数必须是一个符合 routes 选项要求的数组.

  • vue路由结构可设一层方便动态添加路由操作

    动态添加路由基本功能 let routes=[{ path: '/login', name: 'login', component: () => import('../components/Login.vue') }] this.$router.addRoutes(routes) 涉及多层路由嵌套 如图 单纯使用addRoutes 层级结构不同 修改路由结构 例: { name:'account', path: '/account/account', meta: { title: '个人中心',

  • vue用addRoutes实现动态路由的示例

    之前在基于Vue实现后台系统权限控制一文中提到路由权限的实现思路,因为不喜欢在每次路由跳转的before钩子里做判断,所以在初始化Vue实例前对路由做了筛选,再用实际路由初始化Vue实例,代价是登录页需要从Vue实例中独立出来,实现上倒没什么问题,不过这种做法需要在登录和首页之间通过url跳转,感觉总是不太"优雅",实际上只要能在登录后动态修改当前实例的路由就行了,之前确实没办法,但vue-router 2.2版本新增了一个router.addRoutes(routes)方法,让动态路

  • vue addRoutes实现动态权限路由菜单的示例

    需求 最近接手一个后台管理系统,需要实现导航菜单从后台拉取的效果:根据登录用户的权限不同分别拉出来的导航菜单也不一样,另外可操作的界面也存在区别. 问题 因为后台管理系统是准备使用vue+vue-router+element-ui+vuex的搭配来做的,可是单页应用在进入页面之前就已经将vue-router实例化并且注入vue实例中了,所以在进入登录页面的时候旧没办法在重新定制路由了.接下来各种百之谷之,发现vue-router在2.0版本中提供了addRoutes方法添加路由,希望的曙光出现.

  • Vue 解决路由过渡动画抖动问题(实例详解)

    前言 Vue-Router 作为 Vue 的核心模块,它为我们提供了基于组件的路由配置.路由参数等功能,让单页面应用变得更易于管理.良好的路由管理尤为重要,比如路由拦截.路由懒加载.路由权限等都在开发中起着至关重要的作用.同时路由还支持视图过渡效果,没有添加过渡动画的路由切换会感觉很生硬,为了提高用户体验,路由过渡还是很有必要的.毕竟做出来,自己看着也舒服. 过渡动效文档:https://cn.vuejs.org/v2/guide/transitions.html 过渡动画抖动 代码片段 这里为

随机推荐