舟山网站网站建设,地方门户网站如何宣传,什么是企业网站建设,电子商务网站建设效果在前几篇内容中已完成菜单、角色及菜单权限等相关开发#xff0c;若要在左侧菜单根据用户角色动态展示菜单#xff0c;需对 Sidebar 中的相关数据进行修改。鉴于其他相关方法及类型已在前文实现#xff0c;本文不再重复阐述。
1 修改 Sidebar 组件
在 src/layout/componen…在前几篇内容中已完成菜单、角色及菜单权限等相关开发若要在左侧菜单根据用户角色动态展示菜单需对 Sidebar 中的相关数据进行修改。鉴于其他相关方法及类型已在前文实现本文不再重复阐述。
1 修改 Sidebar 组件
在 src/layout/components/Sidebar/index.vue 中修改路由数据来源更新为动态生成的菜单代码如下
//src/layout/components/Sidebar/index.vue
templatediv!-- 侧边栏Logo组件根据配置决定是否显示并响应侧边栏折叠状态 --logo v-ifsidebarLogo :collapsesidebar.opened/logo!-- Element UI菜单组件配置了背景色、文本颜色和激活项颜色 --el-menuborder-noneclasssidebar-container-menu:default-activedefaultActive:background-colorvariables.menuBg:text-colorvariables.menuText:active-text-colortheme:collapsesidebar.opened!-- 动态生成菜单项menuRoutes包含了所有需要显示的菜单项 --sidebar-itemv-forroute in menuRoutes:keyroute.path:itemroute/!-- 增加父路径用于el-menu-item渲染的时候拼接 --/el-menu/div
/templatescript langts setup
// 导入应用状态管理相关模块
import { useAppStore } from /stores/app;
// 导入样式变量
import variables from /style/variables.module.scss;
// 导入设置状态管理
import { useSettingStore } from /stores/settings;
// 导入菜单状态管理
import { useMenuStore } from /stores/menu;// 获取菜单状态
const meuStore useMenuStore();// 计算属性响应式菜单数据来自状态管理中的权限菜单树
const menuRoutes computed(() meuStore.state.authMenuTreeData);// 获取当前路由信息
const route useRoute();// 获取侧边栏状态展开/折叠
const { sidebar } useAppStore();// 计算属性当前激活菜单项默认使用当前路由路径
const defaultActive computed(() {// .....return route.path;
});// 获取设置状态
const settingsStore useSettingStore();
// 计算属性主题颜色响应式更新
const theme computed(() settingsStore.settings.theme);// 计算属性侧边栏Logo显示控制响应式更新
const sidebarLogo computed(() settingsStore.settings.sidebarLogo);
/scriptstyle scoped/style2 修改 SidebarItem 组件
修改 src/layout/components/Sidebar/SidebarItem.vue 中的路径解析方法代码如下
//src/layout/components/Sidebar/SidebarItem.vue
template!-- 当菜单项没有设置hidden为true时显示 --template v-if!item.meta?.hidden!-- 情况1如果只有一个子菜单且没有设置alwaysShow直接渲染子菜单项 --sidebar-item-linkv-iffilteredChildren.length 1 !item.meta?.alwaysShow:toresolvePath(singleChildRoute.path)el-menu-item :indexresolvePath(singleChildRoute.path)el-icon v-ificonName!-- 显示菜单项图标 --svg-icon :icon-nameiconName //el-icon!-- 菜单项标题 --template #title{{ singleChildRoute.meta.title }}/template/el-menu-item/sidebar-item-link!-- 情况2有多个子菜单或设置了alwaysShow渲染为下拉菜单 --el-sub-menu v-else :indexitem.pathtemplate #titleel-icon v-ificonName!-- 父菜单项图标 --svg-icon :icon-nameiconName //el-icon!-- 父菜单项标题 --span{{ item.meta?.title }}/span/template!-- 递归渲染子菜单项 --sidebar-itemv-forchild of filteredChildren:keychild.path:itemchild/sidebar-item/el-sub-menu/template
/templatescript langts setup
// 导入路径校验工具和菜单项类型定义
import { isExternal } from /utils/validate;
import type { ITreeItemDataWithMenuData } from /utils/generateTree;// 定义组件props接收菜单项数据
const { item } defineProps{item: ITreeItemDataWithMenuData;
}();// 计算属性过滤掉隐藏的子菜单项
const filteredChildren computed(() (item.children || []).filter((child) !child.meta?.hidden)
);// 计算属性确定当前要渲染的菜单项
// 如果只有一个子菜单渲染子菜单否则渲染当前菜单项
const singleChildRoute computed(() filteredChildren.value.length 1 ? filteredChildren.value[0] : { ...item }
);// 计算属性获取菜单项图标
const iconName computed(() singleChildRoute.value.meta?.icon);// 路径解析函数处理菜单项路径
// 外部链接直接返回内部链接可能需要拼接父路径
const resolvePath (childPath: string) {if (isExternal(childPath)) {return childPath;}return childPath;
};
/script下一篇将继续探讨 权限指令的实现敬请期待~
