vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）

之前开发的vue项目路由都是写在前台的，现在公司需要把路由放在后台生成，前台用接口拿到数据，渲染成路由数据，生成左侧菜单，我之前也是参照大师兄的一篇博文，写的，然后用的过程中就有一些问题出现，比如登录成功后跳到首页，没有菜单，需要刷新一下，才能出现，或者是，第一次登录完后，再换个角色登录，拿到的还是上次登录的菜单，也需要刷新才有菜单，如果大家想要参照大师兄的博文，可以点这个链接https://segmentfault.com/a/1190000015419713

大体步骤：拦截路由->后台取到路由->保存路由到localStorage(用户登录进来只会从后台取一次，其余都从本地取,所以用户，只有退出在登录路由才会更新)

1.我是把一些登录、404报错路由写在前端页面，其他路由都是请求接口从后台获取的。

如图：

2.建一个新的文件名叫promission.js 和main.js同级

3vue项目要安装一个插件 npm install vue-loader

4.在路由文件要建两个文件分别是

_import_development.js文件里的内容如下图

_import_production.js文件夹的内容如下图

然后在建一个js 里面写一些过滤路由的方法还有后台传过来的是字符串格式，但是前端路由要求的是组件对象

5.我是在登录的时候，点击登录成功后获取后台路由，因为后台传的JavaScript 对象，文件太大，就转成了json保存，如下图操作

这样差不多就行了，就可以拿到数据渲染侧边菜单了。

vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）相关推荐

Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)，其实就是路由在后台配置前端请求接口后生成路由表
最近刚结束一个项目,然后再客户的百般刁难下又增加了项目新需求: 后台传来当前用户对应权限的路由表,前端通过调接口拿到后处理(后端处理路由) vue项目实现动态路由的方式大体可分为两种: 1.第一种就是 ...
Vue 动态路由的实现(后台传递路由，前端拿到并生成侧边栏)
今天我们来讲讲用后台传递路由表实现动态路由的思路,因为公司的项目里路有部分用到了vuex,我就把路由部分脱离vuex整理了出来,让大家有个启发,并不是绝对的解决方案,只是思路 github:https ...
vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
addRoute 路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路: 动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由静态路由和动态路由的优缺点 1. ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
VUE动态路由组件懒加载解决方案
项目场景: 将项目静态路由替换成动态路由,通过后台数据拿到路由配置信息动态加载问题描述: 小编将路由信息与系统菜单信息存在一起,当登录后拿到菜单信息后同时处理路由数据,过程肯定不是那么一帆风顺的,下 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
VUE不同路由地址跳转相同页面，页面数据根据不同参数刷新
VUE不同路由地址跳转相同页面,页面数据根据不同参数刷新在<script></script>标签中增加监听,当路由发生改变时,重新调用查询数据接口, export defau ...
ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Vue 动态路由的实现
vue项目实现动态路由的方式大体可分为两种: 前端这边把路由写好,登录的时候根据用户的角色权限来动态展示路由,(前端控制路由) 详情可参阅花裤衩大佬的项目手把手-,我当时看这个项目看了好久才明白一点逻 ...

vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）

vue 动态路由的实现（后台数据，前台拿到数据生成侧边栏）相关推荐

最新文章

热门文章