vue 动态添加路由

为什么80%的码农都做不了架构师？>>>

最近在研究权限的相关东西，自然动态加载路由信息少不了。接下来我就来专门记录下我研究的东西。

1、首先后端代码返回一个对象，用java写的，返回的是对象，不是字符，如果是字符前端注意转换成对象。

@GetMapping("/home/index")
public List<Router> index() {List<Router> routers = new ArrayList<>();Router router = new Router();router.setPath("/index");router.setName("index");router.setComponent("components/index");routers.add(router);return routers;
}

2、随便找个组件，在里面动态添加路由信息。我这里用到vuex相关东西，不多介绍这个了。注意：在import的时候，一定不能全部使用变量，的有一部分路径信息才行，我这里是@/表示根目录，如果只写变量是读取不到模块的。

<template><div>测试下router</div>
</template><script>
import axios from 'axios'
export default {data () {return {aa: []}},created () {// 创建一个请求axios.get('http://localhost:8080/home/index').then(response => {var routers = []response.data.forEach(item => {var com = item.componentvar temp = {path: item.path,name: item.name,component: () => import(`@/${com}`)}routers.push(temp)this.$store.commit('SET_ROUTEINFO', routers)})console.dir(this.$store.getters.routeInfo)this.$router.addRoutes(this.$store.getters.routeInfo)}).catch(error => console.dir(error))}
}
</script>

3、然后你就可以访问http://localhost/#/index，注意：每次刷新页面后，会重新初始化掉。

转载于:https://my.oschina.net/uwith/blog/3039148

vue 动态添加路由相关推荐

vue动态添加路由之避坑指南
你是否遇到了: addRouter后出现白屏路由守卫出现死循环踩了很多坑之后,我终于悟到了vue动态添加路由的正确打开方式: 为了设计权限,在前端我们通常采取两种方式 1.在用户登录时获取该用户权 ...
vue的动态路由（登录之后拿到动态路由通过addRouters()动态添加路由）
登录后我们拿到路由动态路由,后端传的数据可能为这个 {path: '/index',meta: {title: '首页',icon: 'icon-shouye',tab_index: 0, //给头部 ...
vue当中addRoutes动态添加路由白屏解决和next(),next(“/“)的一些区别
问题产生前言使用动态添加路由router.addRoutes()后进入一个页面,对着这一个页面刷新一下,然后页面就白屏了并且不管刷新多少次都没有用,依旧是白屏,只有重新进入页面才有效果比如对于网站 ...
【前端】Vue+Element UI案例：通用后台管理系统-登陆不同用户显示不同菜单、动态添加路由
文章目录目标代码 0.动态地显示菜单:store 1.动态注册路由 2.解决刷新后摆平问题总代码本篇修改的代码文件 tab.js 参考视频: VUE项目,VUE项目实战,vue后台管理系统,前 ...
addroutes刷新_vue 解决addRoutes动态添加路由后刷新失效问题
前言某些场景下我们需要利用addRoutes动态添加路由,但是刷新后就会失效,前段时间项目里刚好遇到了这个应用场景,所以就花时间研究了一下,做下分享跟记录,说的不对的地方,请大家指正. 应用场景:用 ...
activemenu怎么拼 vue_vue-element-admin登录逻辑，以及动态添加路由，显示侧边栏
这段时间在研究element-admin,感觉这个库有许多值得学习的地方,我学习这个库的方法是,先看它的路由,顺着路由,摸清它的逻辑,有点像顺藤摸瓜. 这个库分的模块非常清晰,适合多人合作开发项目,但 ...
vue2.0 + router 3. 0 动态添加路由
3月11日周五作日回顾 .动态添加路由实现语句 vue 2.0使用 this.$router.addRoutes(); this.$router.addRoutes(currRoutes);// ...
vue3动态添加路由
文章目录前言一.初始化项目二.添加"vip"路由三.总结前言有的时候我们需要根据不同的用户身份生成不同的路由规则,例如: vip用户应该有自己的vip页面所对应的专用路 ...
通过addroutes动态添加路由
说明:addroutes是用来动态添加路由的,在做权限管理的时候会用到这个api,接下来我们一起来探究一下这个api吧. 一.addroutes的使用 1.router/index.js import ...

vue 动态添加路由

vue 动态添加路由相关推荐

最新文章

热门文章