文章目录
- 1 动态路由
-
- 1.1 stores/index.js(动态添加路由函数)
-
- 1.1.1 获取菜单数据
- 1.1.2 动态导入组件
- 1.1.3 处理菜单项
- 1.1.4 添加路由
- 1.1.5 整体代码
- 1.2 router/index.js(移除子路由)
- 1.3 Login.vue(登录页面)
- 2 多账号bug问题
-
- 2.1 问题复现
- 2.2 解决多账号路由问题(stores/index.js)
动态添加路由函数,解决多账号路由权限问题。
1 动态路由
1.1 stores/index.js(动态添加路由函数)
一个用于动态添加路由的addMenu函数,它接收一个router对象作为参数。
函数的主要目的是根据state.value.menuList中的菜单数据,动态地加载对应的Vue组件,并将这些路由添加到Vue Router 中。
1.1.1 获取菜单数据
const menu = state.value.menuList;
从 state 中获取菜单列表。
1.1.2 动态导入组件
import.meta.glob是Vite提供的一个非常强大的功能,用于动态导入(Dynamic Import)多个模块。
它特别适用于需要根据条件或配置来决定加载哪些模块的场景,比如动态路由、按需加载组件等。