VUE-ELEMENT-ADMIN中动态生成路由是怎么做的？

最新推荐文章于 2024-05-09 09:38:15 发布
最新推荐文章于 2024-05-09 09:38:15 发布
阅读量395 收藏
点赞数
文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FalconKkv/article/details/120892061
版权

VUE-ELEMENT-ADMIN中动态生成路由是怎么做的？

1.执行login.vue中的登录事件handleLogin，跳转登录主页

请添加图片描述

其中触发store/user下的login

请添加图片描述

设置token到cookie

在这步执行router路由跳转前执行路由beforerouter

请添加图片描述

首先检测是否有token，由于刚刚设置过了，此时你要跳转的肯定不是登录界面，故此时走else

此时hasRoles从store中获取的值为初始值，也就是[]，故此时hasRoles为false

所以会在嵌套的if(hasRoles)逻辑中进入else代码块，如下

请添加图片描述

此步骤执行了store/user.js中的getInfo和generateRoutes

请添加图片描述
请添加图片描述
下图方法会进行过滤，返回符合用户角色权限的路由表
请添加图片描述

将刚刚为空数组的roles赋值为当前登录角色的权限列表，比如：[‘admin’]

请添加图片描述
上图，获取到过滤后的当前角色能看到的router列表，接着走刚刚beforerouter中的逻辑会重新路由，此时roles就不为空了

由于上一步骤中mutation中的SET_ROUTES，所以在navbar中，会默认接受此时的所有路由，prop中的item是当前路由，部分router的hidden为true，此类为login或404，所以不会在此页显示，其他正确的界面都会显示，到此完成

请添加图片描述

YDxxxxxx
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Vue2中利用webpack动态生成路由
2301_76250038的博客
03-06 996
利用webpack来根据目录结构动态生成路由，将对路由的维护集中到路由组件本身，降低维护的难度。
Vue 动态路由的实现
m0_37824255的博客
03-31 931
我们在日常开发中，经常会遇到项目需要权限管理的，当项目越来越大的时候，我们还是非常需要做动态路由这一块的，现在我们一起来了解一下如果制作vue的动态路由； 1.基础路由的配置 // router.config.js import { BasicLayout } from '@/layouts' import { bxAnaalyse } from '@/core/icons' /** * 基础路由 * @type { *[] } */ export const constantRouterMap =
Vben Admin 动态路由在标签页（Tab）上只能单个打开
最新发布
weixin_48315912的博客
05-09 339
在 Vben Admin 中，如果你希望某个动态路由在标签页（Tab）上只能单个打开，不允许同时打开多个相同路由的标签页，你可以利用 Vben Admin 提供的动态路由标签页自动关闭功能。通过以上步骤，你应该能够实现在 Vben Admin 中对特定动态路由的标签页进行限制，保证只能打开单个标签页。它应该是一个不包含动态片段的路径字符串，Vben Admin 使用它来识别和合并相同的动态路由标签页。如果你的项目中有特定的路由守卫或逻辑需要处理，确保它们与动态路由标签页自动关闭功能兼容。
vben-admin路由配置项
qq_42989829的博客
05-10 2648
vben-admin路由配置项
element-admin 登陆，路由跳转，权限逻辑
qq_42962779的博客
03-13 6366
首先记录一下发布element-admin前端框架至服务器遇到的一个坑 最近打包发布element-admin前端框架至服务器，发现打包后，服务器上无法跳转到主页的问题，网上大部分都说是跨域的问题，跨域也会有这种问题，不过笔者这次不是跨域的问题，因为后台已经对跨域做了处理，最终排查发现是由于此框架内mock的数据地址和自己后台地址冲突了，导致线上调用了本地mock数据的地址，（后台地址和本地moc...
vue-element-admin 框架 页面内跳转非左侧菜单，展示标签导航viewTag
lchmyhua88的博客
11-17 4097
vue-element-admin 框架 页面内跳转非左侧菜单栏页面
vue-element-admin中文版本
07-20
Vue-element-admin 是基于 Vue.js 的一套全面的后台管理系统模板，它利用了 Element UI 这个流行的 UI 组件库，提供了一系列预设的页面模板、路由、权限管理等功能，极大地加速了后台管理系统的开发过程。...
vue-element-admin 集成框架设置中文语言
11-10
在"vue-element-admin 集成框架设置中文语言"这个主题中，我们主要讨论如何在vue-element-admin项目中实现中文语言的集成。Element 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-16
在“学习vue-element-admin，优化了大量融入代码，添加中文注释”的项目中，我们可以深入理解以下几个关键知识点： 1. **Vue.js核心概念**： - **虚拟DOM**：Vue.js通过虚拟DOM实现高效的数据更新，减少了不必要的...
【Abp VNext】实战入门（五）：【9】前端管理界面 vue-element-admin —— Router路由跳转及参数传递
刘永洪的博客
02-18 3028
一、前言： 除了常规的通过标签link形式跳转页面的方法，vue-element-admin 项目中已经自带路由封装，可以在代码中手动控制页面路径跳转， 通常只需要知道如何跳转页面，如何传递参数即可。 配合底层路由拦截功能，参考：【Abp VNext】实战入门（五）：【2】前端管理界面 vue-element-admin —— 路由拦截优化改造 二、必须的页面路径申明配置： 描述：所有页面要进行展示都必须先在路由页面中先行声明（名称、路径…） 1、在根目录router/index.js 中配置写好的vue页
Vue-elementui开启路由实现页面跳转
qq_52998673的博客
02-13 366
Vue-elementui开启路由实现页面跳转
vue-admin动态路由的实现
目标检测专栏持续更新中，改进YOLO系列通用，适用v5、v7、v8、所有博客均是团队原创博客，所有文章禁止转载，违者必究。
03-01 1199
前言：项目开发中菜单栏往往是后端基于角色控制的，所以菜单栏通过后端返回，然后在进行渲染，vue-admin这个管理系统模板用的人贼多，以此为例。 一、首先打开router/index.js文件吗，把constantRoutes写的静态路由全删了，只留下公共的界面，比如login、404之类的。其他路由后面通过接口获取。 二、在store/modules/permission.js进行修改，如果没有文件就创建，该文件使用vuex的状态管理，把菜单信息存储起来，最后把菜单渲染出去 // router/in.
vue-element-admin 跳转详情页，添加面包屑，侧边栏不显示
曳猫的博客
08-03 2523
侧边栏无显示，添加面包屑。
vue-element-admin 中怎么点击按钮进行路由跳转并传参
d2916172682的博客
02-27 1109
1.location: (required) 字符串或对象，表示要导航到的目标路由。this.$router.push 是 Vue Router 提供的方法之一，用于在 Vue.js 中进行编程式的路由导航。它可以让你在 JavaScript 代码中动态地导航到不同的路由。通过使用它，你可以在 Vue.js 应用程序中进行灵活的路由导航操作。假设你有一个按钮，当点击它时需要跳转到另一个页面，并且需要传递参数。首先，确保你的路由配置允许接收参数。是一个动态参数，你可以在跳转时将其替换为实际的参数值。
vue-element-admin点击按钮跳转新页面方法$router.push
热门推荐
前端视听
09-11 1万+
1：首先在view里面新建一个新的组件页面 addChip.vue 2：打开router/index.js 配置新增组件 { path: 'addChip', component: () => import('@/views/chip/addChip'), name: 'addChip', meta: { title: '新增拼图' }, hidden:true, }, 3：打开chip组件界面，开始写一
vue-element-admin把动态路由放导航列表中间，动态路由刷新跳转404
weixin_43957510的博客
09-25 1858
需求 把动态路由放在导航中间而不是最后 思路 只要在修改原来插入动态路由的地方就可以 操作 修改文件： /src/store/modules/permission.js。 const mutations = { SET_ROUTERS: (state, routes) => { state.addRoutes = routes // state.routes = constantRoutes.concat(routes) //权限路由在最后 // 把权限路由放在中间，在c
vue-element-admin 框架的动态路由，图形验证码和权限管理的前端的实现（注意只是前端,api接口没写）
weixin_43780179的博客
11-17 1276
vue-element-admin 框架的动态路由，图形验证码和权限管理的前端的实现（注意只是前端）
vue-element-admin动态路由 nodejs
05-31
好的，针对你的问题，我可以为你提供一些参考： Vue-element-admin 是一个基于 Vue 和 Element UI 的后台管理系统模板，提供了很多常用的功能和组件。而动态路由，是指路由根据用户角色或权限的不同，动态生成可访问的路由。 在 Vue-element-admin 中，可以通过 nodejs 来实现动态路由。具体步骤如下： 1. 在后台管理系统中，定义好角色和权限。可以使用数据库或者其他方式存储。 2. 在 nodejs 中，编写一个接口，用于根据用户角色获取可访问的路由信息。这个接口可以返回一个 JSON 数组，数组中包含每个路由的 path、component、name 等信息。 3. 在前端中，使用 axios 等工具调用刚刚的接口，获取可访问的路由信息。 4. 使用 Vue-router 的 addRoutes 方法，动态添加可访问的路由。 这样，就可以根据用户角色或权限，动态生成可访问的路由，实现动态路由的功能。 希望以上内容能够对你有所帮助，如果还有其他问题，可以继续问我哦。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值