Vue 动态路由的实现

vue项目实现动态路由的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

详情可参阅花裤衩大佬的项目手把手…,我当时看这个项目看了好久才明白一点逻辑，
因为大神的动态路由那里有好多层判断，并且穿插各种vuex，把小白的我都快搞懵逼了，对我启发很大，也正是这篇文章，给我提供了很多逻辑

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

今天我们来讲讲用后台传递路由表实现动态路由的思路，因为公司的项目里路有部分用到了vuex，我就把路由部分脱离vuex整理了出来，让大家有个启发，并不是绝对的解决方案，只是思路
github:https://github.com/Mrblackant…
在线查看:http://an888.net/antRouter/#/…

思路整理

以下四步骤对应的代码都在下方会讲到，并且是对应的

后台同学返回一个json格式的路由表，我用easymock造了一段:动态路由表，大家可参考;

因为后端同学传回来的都是字符串格式的，但是前端这里需要的是一个组件对象啊，写个方法遍历一下，将字符串转换为组件对象;

利用vue-router的beforeEach、addRoutes、localStorage来配合上边两步实现效果;

左侧菜单栏根据拿到转换好的路由列表进行展示;

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

代码

1、路由表

每个路由都使用到组件Layout,这个组件是整体的页面布局:左侧菜单列，右侧页面,所以children下边的第一级路由就是你自己的开发的页面,meta里包含着路由的名字，以及路由对应的icon;
因为可能会有多级菜单，所以会出现children下边嵌套children的情况;

路由是数组格式

"data": {"router": [{"path": "","component": "Layout","redirect": "dashboard","children": [{"path": "dashboard","component": "dashboard/index","meta": {"title": "首页","icon": "dashboard"}}]},{"path": "/example","component": "Layout","redirect": "/example/table","name": "Example","meta": {"title": "案例","icon": "example"},"children": [{"path": "table","name": "Table","component": "table/index","meta": {"title": "表格","icon": "table"}},{"path": "tree","name": "Tree","component": "tree/index","meta": {"title": "树形菜单","icon": "tree"}}]},{"path": "/form","component": "Layout","children": [{"path": "index","name": "Form","component": "form/index","meta": {"title": "表单","icon": "form"}}]},{"path": "*","redirect": "/404","hidden": true}]}

2.将后端传回的"component": “Layout”, 转为"component": Layout组件对象

因为有多级路由的出现，所以要写成遍历递归方法，确保把每个component转成对象，
因为后台传回的是字符串，所以要把加载组件的过程封装成一个方法(此处参考花裤衩大神的解决方法)，用这个方法在遍历中使用;详情查看项目里的router文件夹下的 _import_development.js和_import_production.js文件
Layout我放的目录跟其他文件的目录不一样，所以我在遍历里单独处理，各位小伙伴可自己调整哈

const _import = require('./router/_import_' + process.env.NODE_ENV)//获取组件的方法
import Layout from '@/views/layout' //Layout 是架构组件，不在后台返回，在文件里单独引入function filterAsyncRouter(asyncRouterMap) { //遍历后台传来的路由字符串，转换为组件对象const accessedRouters = asyncRouterMap.filter(route => {if (route.component) {**加粗文字**     if (route.component === 'Layout') {//Layout组件特殊处理route.component = Layout} else {route.component = _import(route.component)}}if (route.children && route.children.length) {route.children = filterAsyncRouter(route.children)}return true})return accessedRouters
}

3、使用beforeEach、addRoutes、localStorage来配合实现

beforeEach路由拦截，进入判断，如果发现本地没有路由数据，那就利用axios后台取一次，取完以后，利用localStorage存储起来，利用addRoutes动态添加路由，
ps：beforeEach好坏啊，一步小心就进入到了他的死循环，浏览器都tm崩了，得在一开始就加判断，拿到路由了，就直接next()，嘤嘤嘤
global.antRouter是为了传递数据给左侧菜单组件进行渲染

import axios from 'axios'var getRouter //用来获取后台拿到的路由router.beforeEach((to, from, next) => {if (!getRouter) {//不加这个判断，路由会陷入死循环if (!getObjArr('router')) {axios.get('https://www.easy-mock.com/mock/5a5da330d9b48c260cb42ca8/example/antrouter').then(res => {getRouter = res.data.data.router//后台拿到路由saveObjArr('router', getRouter) //存储路由到localStoragerouterGo(to, next)//执行路由跳转方法})} else {//从localStorage拿到了路由getRouter = getObjArr('router')//拿到路由routerGo(to, next)}} else {next()}})function routerGo(to, next) {getRouter = filterAsyncRouter(getRouter) //过滤路由router.addRoutes(getRouter) //动态添加路由global.antRouter = getRouter //将路由数据传递给全局变量，做侧边栏菜单渲染工作next({ ...to, replace: true })
}function saveObjArr(name, data) { //localStorage 存储数组对象的方法localStorage.setItem(name, JSON.stringify(data))
}function getObjArr(name) { //localStorage 获取数组对象的方法return JSON.parse(window.localStorage.getItem(name));}

4.拿到遍历好的路由，进行左侧菜单渲染

上边第三部会给 global.antRouter赋值，这是一个全局变量（可以用vuex替代），菜单那边拿到路由，进行渲染，这里又是参考了花裤衩大神的layout部分 ,这里我就不贴代码了

Vue 动态路由的实现相关推荐

ant design pro vue 动态路由流程详解
ant design pro vue 动态路由流程详解前言流程图流程1 src/permission.js 流程2 src/store/modules/user.js 流程3 src/perm ...
Vue动态路由的前端实现
1. 需求描述最近开发的一个项目,涉及到这样一个需求:随着项目的不断推进,后台管理功能逐渐增多,与此同时,静态路由表也逐渐扩大,需要把静态路由方式转换为动态路由方式.要完成这样一个转换,有几个技术要 ...
Vue动态路由传参和监听路由
Vue动态路由传参 query传参 params传参 //定义Detail路由 {path: '/detail/:id',name: 'Detail'component: () => impor ...
Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制
思路: 动态路由实现:在导航守卫中判断用户是否有用户信息,通过调用接口,拿到后台根据用户角色生成的菜单树,格式化菜单树结构信息并递归生成层级路由表并使用Vuex保存,通过 router.addRout ...
第6.1.3 vue动态路由初探
从老A / AG-Admin这个里面,老A用的是 vue-element-admin的后台框架我看到的动态路由的写法,但是我自己亲自尝试,连一个登陆页面也出不来. 在Vue2项目构建心得,我也看到了 ...
vue动态路由变化页面不重新加载问题，实现方式比较简单，就是有点鸡贼
由于使用了动态路由,有时候页面需根据路由来动态变化,整个页面需要重新加载,但是地址指向同一个,这边用了一个比较取巧的方式将整个页面封装成一个子组件 children => formTe,参数可 ...
seo vue 动态路由_基于Vue SEO的四种方案
前言:众所周知,Vue SPA单页面应用对SEO不友好,当然也有相应的解决方案,下面列出几种最近研究和使用过的SEO方案,SSR和静态化基于Nuxt.js来说. 关于服务器渲染:,对Vue版本有要求, ...
vue动态路由添加，vue-router的addRoute方法实现权限控制，添加根路由和子路由
addRoute 路由分为静态路由和动态路由静态路由和动态路由的优缺点动态路由实现思路: 动态路由遇到的问题与解决方式动态添加子路由路由分为静态路由和动态路由静态路由和动态路由的优缺点 1. ...
vue动态路由权限管理
通常我们在vue项目中都是前端配置好路由的,但在一些项目中我们可能会遇到权限控制,这样我们就涉及到动态路由的设置了. 动态路由设置一般有两种: (1).简单的角色路由设置:比如只涉及到管理员和普通用户 ...
vue动态路由配置，通过路由区分模块化打包配置
import Vue from 'vue'; import Router from 'vue-router'; import config from '@/config';Vue.use(Router ...

Vue 动态路由的实现

vue项目实现动态路由的方式大体可分为两种:

前端这边把路由写好，登录的时候根据用户的角色权限来动态展示路由，(前端控制路由)

后台传来当前用户对应权限的路由表，前端通过调接口拿到后处理(后端处理路由)

思路整理

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

代码

1、路由表

路由是数组格式

2.将后端传回的"component": “Layout”, 转为"component": Layout组件对象

3、使用beforeEach、addRoutes、localStorage来配合实现

4.拿到遍历好的路由，进行左侧菜单渲染

Vue 动态路由的实现相关推荐

最新文章

热门文章