读vben2-理解一个项目的路由、菜单、权限控制

已于 2025-02-05 17:52:59 修改
阅读量385 收藏 7
点赞数 3
分类专栏： vben-admin 文章标签： vue.js 前端 javascript
于 2025-02-05 17:51:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44667515/article/details/145456062
版权

背景：以下为个人的粗糙理解，捋清楚在开发中的大致思路。有了正确的思路，实现它就不是问题。欢迎指正，更多细节慢慢填充。

路由

路由的创建

  •  创建路由实例createRouter() 

 a、选择什么样的模式？hash、history、Memory之间的区别，不同模式下前后端需要怎么配合。

 b、初始路由列表数据

  •   注册路由插件app.use(router)

路由的常见分类

  • 静态路由

即无需做权限控制的初始路由，允许所有用户查看，如登录页、404提示页等

  • 动态路由（asyncRoutes）

一般为与项目具体功能相关的路由，项目中需做页面权

最低0.47元/天 解锁文章
第七节：Vben Admin权限-后端获取路由和菜单
cui_win的专栏
03-13 2234
这段时间比较忙，更新暂停了一些天，今天我们继续。上一节，我们切换了权限方式为BACK模式，分析了getPermCode接口。最后我们遇到了/api/getMenuList接口404。这节我们就编写后端对应的/api/getMenuList接口到这里，我们已经实现了后端权限控制模式下的前后端对接。后面的优化方向主要就是如何存储权限和用户数据，用数据库将权限数据保存和查询。
Vben开源添加本地路由（不用显示在菜单的路由）
懒羊羊懒羊羊
10-26 647
2.src\store\modules\permission.ts的文件里引入 最后在src\router\routes\modules\article.ts使用即可
Vben 路由
yfgsjsn1111的博客
10-07 222
1.//在src/router/routes/modules文件夹内新建list.ts文件。
vben admin 后端路由 角色 菜单 配置
qq_24953751的博客
01-06 2515
1.第一步，先给相应改成后端路由 默认permissionMode: PermissionModeEnum.ROUTE_MAPPING,这里有个地方需要注意 在meta 配置setHideMenu(true);代表不在菜单显示，但是可以通过按钮请求到。以上是路由的配置，有不懂的可以qq：929089727 李森源。下面：当前用户对应的按钮 拼接成string数组就可以了。格式例子： ['新增', '修改', '删除']这样前端就基本完成了，接下来看后端的。第二步就是配置按钮权限了，
Vben Admin 动态路由在标签页（Tab）上只能单个打开
weixin_48315912的博客
05-09 877
在 Vben Admin 中，如果你希望某个动态路由在标签页（Tab）上只能单个打开，不允许同时打开多个相同路由的标签页，你可以利用 Vben Admin 提供的动态路由标签页自动关闭功能。通过以上步骤，你应该能够实现在 Vben Admin 中对特定动态路由的标签页进行限制，保证只能打开单个标签页。它应该是一个不包含动态片段的路径字符串，Vben Admin 使用它来识别和合并相同的动态路由标签页。如果你的项目中有特定的路由守卫或逻辑需要处理，确保它们与动态路由标签页自动关闭功能兼容。
Vben Admin 二(登录页)
为何这么帅
09-25 6230
深入 Vben Admin 登录部分 1、运行 使用指令 yarn serve 执行 Local: http://localhost:3100/ 此时的路径为http://localhost:3100/#/login?redirect=/dashboard/analysis 2、参与 文件 作用 main.ts 序入口文件 index.ts 设置默认主页（当前为登录页） LoginForm.vue 登录页表单 3、详解 一、main.ts 问题 解答
vue-vben-admin-main.zip
04-09
Vue-Vben-Admin 是一个基于 Vue.js 的现代化管理后台模板，设计风格采用了流行的 Ant Design Vue 框架，提供了一套完整的权限管理、表单、表格、多级路由、国际化等企业级应用所需的组件和功能。这个压缩包 "vue-...
第五节：Vben Admin权限-前端控制方式
cui_win的专栏
02-27 2645
上一节，我们完成了登录功能，已经顺利登录到工作台页面。在工作台页面可以看到左侧已经存在了一些路由菜单。本节我们首先要分析下路由的来龙去脉。本节我们分析了Vben Admin路由生成的原理，手动生成了一段路由并自动转菜单。结合登录用户的角色，控制了菜单的显示和隐藏。
第六节：Vben Admin权限-后端控制方式
cui_win的专栏
03-01 1907
上一节，我们了解了Vben Admin前端控制方式权限的实现方式。并手动创建了一个路由和菜单，最后，通过结合用户角色，可以控制菜单的显示和隐藏。本节，我们开始实践Vben Admin后端控制方式生成权限。这节，我们把权限模式改成了BACK了，通过实现getPermCode接口，再次打开的工作台。经过前几节内容，我们已经快摸清楚Vben Admin的权限了。
vben：路由跳转和关闭当前页面
yyyyyyyyyyy_9的博客
06-07 789
使用Vben admin框架开发前端，在tab页用到路由跳转和关闭当前页面的功能，代码如下。
vue-vben-admin:基于Vite2，vue3.0，ant-design-vue 2.x，打字稿，vuex，vue-router的vue3样式管理员，正在努力进行更新。
05-11
Vue vben管理员 English | 介绍 Vue Vben Admin是一个免费的开源中端和后端模板。 使用最新的vue3 ， vite2 ， TypeScript和其他主流技术开发，开箱即用的中端和后端前端解决方案也可用于学习参考。 特征 最新技术发展水平：使用诸如Vue3 / vite2之类的前端前端技术开发 TypeScript ：应用程序级JavaScript语言 主题：可配置的主题 国际：内置完整的国际化程序 模拟服务器内置模拟数据方案 权限内置完整的动态路由权限生成方案。 组件多个常用组件被封装两次 预览 完整版中文网站 完整版本的github站点 简体中文网站 pages-简化的github网站 测试帐号：vben / 123456 使用Gitpod 在Gitpod（适用于GitHub的免费在线开发环境）中打开项目，并立即开始编码。 文献资料 准备 和项目开发环
vben-admin学习（二） 多级路由处理为二级路由
梅子黄时雨
05-26 1345
vue多级路由处理为二级路由
vben后台根据权限返回自定义路由
muitoprazer的博客
04-24 979
vben后台根据权限返回自定义路由
vben admin 新增路由测试,以及页面空白bug定位
YZRHANYU的博客
10-30 4223
vben admin 新增路由测试,以及页面空白bug定位
vben 添加一个独立展示的菜单栏，同时在切换的过程中不刷新
balbalaijk的博客
08-28 651
参考链接：关于页 - https://github.com/vbenjs/vue-vben-admin/blob/v2/src/router/routes/modules/about.ts。1、文件路径：src\router\routes\modules ，中添加对应的菜单文件。​声明，（利用vue的，keep-alive实现菜单的缓存效果）​ //点击菜单时跳转到对应的子菜单路由。2、对应的组件文件中添加组件。​中引入对应页面组件即可，​ //隐藏子菜单展示。​ //加入页面框架。
vben-admin路由配置项
qq_42989829的博客
05-10 2962
vben-admin路由配置项
vue admin-template 添加动态路由
Rux子兮的博客
09-28 1521
store/getters.js const getters = { sidebar: state => state.app.sidebar, device: state => state.app.device, token: state => state.user.token, avatar: state => state.user.avatar, name: state => state.user.name, userId: state =>
vue-elementui-admin 动态路由渲染
球球博客
05-12 3459
vue-elementui-admin 动态路由渲染 在官网下载vue-elementui-admin，进行二次开发，实现动态路由渲染，用户登录后，通过接口从服务端获取权限列表，然后渲染到侧边栏。 注意：此次二次开发未涉及角色（role）删选，需要角色删选权限的可以绕行 1、router.js（@/router/router.js） 定义constantRouterMap：放置所有权限都需要的路由表，例如登录页等。 // router.js import Router from 'vue-router';
vben-admin标签页修改
最新发布
03-12
最后，生成的相关问题需要围绕vben-admin的其他常见配置和扩展，比如布局修改、权限配置、API请求封装等，这些都是用户在使用框架时可能遇到的后续问题。</think>### 如何在 vben-admin 中自定义或修改标签页的功能...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值