超级会员免费看
本文介绍了在Vue项目中实现动态路由的两种方法：简单角色路由和复杂路由权限设置。涉及配置路由权限、创建asyncRouter.js和permission.js、设置路由守卫、将角色存储到store，以及处理后端返回的路由数据。在复杂场景下，需要处理异步路由加载导致的空白页面问题，并考虑数据持久化以防止刷新丢失。
一. 简介
通常我们在vue项目中都是前端配置好路由的，但在一些项目中我们可能会遇到权限控制，这样我们就涉及到动态路由的设置了。
动态路由设置一般有两种：
- 简单的角色路由设置： 比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置
- 复杂的路由权限设置： 比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用
二. 简单路由
（1）配置项目路由权限
// router.js
import Vue from 'vue'
import Router from 'vue-router'
import Layout from 
订阅专栏 解锁全文
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
