Vue2.x动态添加路由实现

适用于：Vue2.x VueRouter3.x
动态添加路由一般应用于受权限控制的路由菜单，由后端返回可以判断该角色具有的权限，前端处理出一份符合权限的路由表，使用addRoutes方法动态添加权限路由。

router.beforeEach(async (to, from, next) => {if (token) {/* has token */if (to.path === "/login") {next({ path: "/home" });} else {// 是否刷新了浏览器if (刷新了浏览器) {router.addRoutes(asyncRouter)//如果 addRoutes 并未完成，路由守卫会一层一层的执行执行，直到 addRoutes 完成，找到对应的路由next({ ...to, replace: true })}next()}} else {if (whiteList.includes(to.name)) {// 在免登录白名单，直接进入next();} else {next({ path: "/login" });}}
});router.afterEach(() => {});

Vue2.x动态添加路由实现相关推荐

vue2.0 + router 3. 0 动态添加路由
3月11日周五作日回顾 .动态添加路由实现语句 vue 2.0使用 this.$router.addRoutes(); this.$router.addRoutes(currRoutes);// ...
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
vue 动态添加路由
为什么80%的码农都做不了架构师?>>> 最近在研究权限的相关东西,自然动态加载路由信息少不了.接下来我就来专门记录下我研究的东西. 1.首先后端代码返回一个对象,用java写 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
addRoute动态添加路由导致浏览器警告
在动态添加路由的时候会在控制栏出现各种各样的路由警告,刚开始以为是路由name重名问题引起,后查询相关资料是动态路由添加引起的,在router/index.js文件下创建一个方法resetRouter ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
动态添加路由 addRoute添加路由刷新404
文章目录动态添加路由案例初步动态添加路由-使用导航守卫解决刷新404问题完整代码: 动态添加路由大概简而言之,就是需要路由是可以按照项目需求进行配置添加的,而不是一开始就配置好的. 就好 ...

Vue2.x动态添加路由实现

Vue2.x动态添加路由实现相关推荐

最新文章

热门文章