vue-element-admin 配置动态路由 路由由后端返回

最新推荐文章于 2024-07-04 17:04:23 发布
最新推荐文章于 2024-07-04 17:04:23 发布
阅读量8.8k 收藏 16
点赞数 4
分类专栏： vue项目 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zm9998/article/details/106692295
版权

需求是：根据用户登录状态，后台识别状态返回路由菜单表，根据菜单表配置路由；

  1. 在登录页用户登录成功后获取菜单；

2.在utils文件下封装一个menu.js；用于转换路由数组；因为后台返回的数组需要自己做处理；

3.配置左侧展示路由

4.刷新页面时会404找不到页面，在main.js中添加存储，这不能直接存储转换过的路由数组，会报错；

 

 

路由格式一定要安装原静态路由格式写，不然会报错；

 

三七_z
关注
  • 4
    点赞
  • 踩
  • 16
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
专栏目录
vue-element-admin动态生成侧边栏以及添加路由
w_gold_qin的博客
03-14 3043
需求：后端根据登录的用户不同，返回具体的路由表，前端根据后端返回的数据动态生成侧边栏以及实现跳转。（与该框架返回角色且根据角色生成路由不同） 1、首先登陆，登陆成功之后拿token获取后端接口，把得到的数据放在localStorage里面 sysHome() { this.$api.xxxxx() .then(function(res) { localStorage.setItem('router', JSON.stringify(res.data))// 返回的数据存在loca
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
VUE(8) : vue-element-admin[8] : 动态路由
Lxinccode的博客
08-17 285
参考 :
【VUE】 深入理解 Vue 动态路由：简介、实际开发场景与代码示例
最新发布
九日的博客
07-04 1116
在传统的路由配置中，我们需要在初始化 Vue 实例时定义所有的路由。但在实际应用中，特别是涉及权限管理、模块懒加载等场景，我们可能需要根据用户的权限或其它条件动态添加或修改路由。Vue Router 提供的动态路由功能正是为了解决这些问题。
Vue-element-admin实现动态路由
TomPig_1024
10-23 8881
一 克隆与安装Vue 此步骤省略，因为都是对Vue-element-admin进行二次开发 二 关于Vue-element-admin内部结构分析 1 静态路由 vue-element-admin是一款开源免费前端后台系统管理框架，clone即用，非常方便，对应它存在的两种路由设计，一种是静态路由，一种是动态路由。 这是vue为了提供的静态路由中一些常用页面，比如根目录，登录，404等，如果还需要添加左边栏菜单，可以模仿静态路由的设计里面，还有权限的设计。 2 动态路由 （1）修改/src/store/m
element-admin动态路由设置
爱学习的大雄的博客
12-08 2672
查看侧边栏组件src/layout/components/Sidebar/index.vue，可以看到用于呈现菜单的 标签中使用的数据来源是 ，我们在前面整了半天生成的 permission_routes 动态路由并没有被使用。本篇文章是我在做element-admin-template的动态路由时所参考的文章，解决方案非常详细，只要由vue基础，按照这个步骤就可以完成路由的动态权限展示.我在项目中设定了三个用户角色，不同的角色具有不同的权限，也对应着不同的路由，同时侧边栏也需根据不同的权限异步生成。
vue-element-admin动态路由权限、菜单
feifei9989的博客
03-17 3276
vue-element-admin动态路由权限、菜单
vue-element-admin 集成框架设置中文语言
11-10
Vue-element-admin是基于Vue.js构建的一个后台管理界面框架，它结合了Element UI组件库，提供了丰富的UI组件和强大的功能，使得开发者能够快速搭建企业级的后台管理系统。 在"vue-element-admin 集成框架设置中文...
vue-element-admin_vue-element_vue-element-admin_elementadmin官网_v
10-02
Vue Element Admin 的官方网站（elementadmin官网）提供了详细的文档和示例，帮助开发者快速理解和上手。在学习和使用过程中，可以参考以下知识点： - **Vue基础知识**：理解Vue的基本概念，如组件、指令、计算属性...
vue-element-admin-4.4.0.zip
03-01
"vue-element-admin-4.4.0.zip" 是一个包含Vue.js前端框架的项目压缩包，主要用于构建管理后台系统。这个版本是4.4.0，意味着它可能包含了该框架的一些更新和改进。Vue.js是一个轻量级、高性能的前端JavaScript框架...
vue-element-admin 完整包 含全部依赖
05-30
在"vue-element-admin"的压缩包中，包含了所有必要的依赖和配置文件，这使得开发者可以直接运行项目，而无需单独安装和配置各个库。这些文件可能包括但不限于：项目配置文件（如package.json）、源代码文件（src目录...
vue-element-admin动态路由，根据后台返回数据渲染路由菜单
包子源的博客
05-22 4778
需要修改\src\store\modules\permission.js文件 import { getMenu } from '@/api/admin' export function generaMenu(routes, data) { data.forEach(item => { const menu = { path: item.url, component: item.component == 'Layout' ? Layout : () =>
vue-element-admin路由后端返回，动态渲染
没有翅膀的我们，只是随便认为不能飞而已
11-15 3079
vue-element-admin默认是按照路由meta.role角色，动态匹配的。但通常是不灵活的。总不能每次设置一个角色，前端还要动态配置。 相对理想的状态，是后台配置一个用户，设置role权限，权限绑定了你需要的路由模块。 本文讲述如何根据后台路由，动态渲染后台管理系统菜单栏。 下载模板 链接 修改配置 store/modules/perimission.js. import { constantRoutes } from '@/router' // import { getRouters } fro
vue动态添加路由,element-admin后台路由
weixin_42657666的博客
07-18 6429
很多后台项目的菜单都是可配置的 所以需要从后台取到菜单数据并加到路由映射用 1.第一步,将后台数据转换成vue-router 需要的数据格式,以下是路由格式 declare type RouteConfig = { path: string; //路径 component?: Component;//对应模块 name?: string; // 命名路由 components?: ...
vue-element-admin把动态路由放导航列表中间，动态路由刷新跳转404
weixin_43957510的博客
09-25 1871
需求 把动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件： /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state.addRoutes = routes // state.routes = constantRoutes.concat(routes) //权限路由在最后 // 把权限路由放在中间，在c
Vue动态路由addRoutes
HelloWorldLJY的博客
07-28 1054
动态路由设置一般有两种： (1)、简单的角色路由设置：比如只涉及到管理员和普通用户的权限。通常直接在前端进行简单的角色权限设置 (2)、复杂的路由权限设置：比如OA系统、多种角色的权限配置。通常需要后端返回路由列表，前端渲染使用 1、简单的角色路由设置 （1）配置项目路由权限 // router.js import Vue from 'vue' import Router from 'vue-router' import Layout from '@/layout' Vue.use(Router) //
vue--element-admin动态路由
weixin_44023290的博客
06-07 530
思路: 就是把获取的数据转换为routes的格式,如下,更加详细的请看目录@/router/index.js下的数据结构。引入后台接口的方法(也就是封装好的axios，然后把接口统一写在一个js文件里，用的时候直接引入，方便后期维护)这里只给出示例，因为我的数据当时在编写的时候就在后台进行转换了，所以我的转换方法并不适用你们自己的！只要可以把数据转换为规定的结构即可！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！请自行编写转换方法思路！
vue+ element 后台动态生成权限菜单，前端动态绑定路由
热门推荐
qq_39651981的博客
01-30 2万+
导语 人生呀 总会有一些改变，入行快2年了，今天来记录下我的第一篇博客，哈哈 不管有没有人看。 开始正题 一、通过后端返回的信息 动态添加路由 首先登录，获取到你的用户信息，把token存在cookies 里面，然后跳转系统首页。在跳转之前我做了一个路由处理 新增了一个 permission.js 直接在main.js 引用就可以了 这个文件用了 router 的 beforeEach ...
element admin 动态路由_vue-element-admin 登陆
weixin_39955142的博客
11-22 300
vue-element-admin 登陆引言vue-element-admin是vue生态圈中，最火的一个后台管理框架。基于vue和element-ui实现。这篇文章主要会讲解登陆的流程以及我认为这个框架的厉害的东西：动态路由，之前看代码的时候，总想着一个登陆搞那么麻烦，后面仔细品味发现原来一个小小的登陆功能涉及到了这么多的东西。准备工作目录结构了解一个框架之前，先要从目录结构入手(这里直接引用花...
vue-element-admin后端改造
07-28
- *2* [vue-element-plus-admin整合后端实战——实现系统登录、缓存用户数据、实现动态路由](https://blog.csdn.net/seawaving/article/details/129766205)[target="_blank" data-report-click={"spm":"1018.2226....
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值