You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.
< template >
<!-- 左侧导航栏组件 -- >
< el -aside class = "index-aside" width = "200px" > <!-- 定义左侧导航栏宽度为200px -- >
< div class = "index-aside-inner" > <!-- 内部容器 -- >
< el -menu default -active = " 1 " > <!-- 定义菜单 ， 默认激活项为第1项 -- >
< el -menu -item @click ="menuHandler('/')" index = "1" > <!-- 菜单项 ， 点击跳转到首页 -- >
<!-- < i class = "el-icon-s-home" > < / i > -- > <!-- 注释掉的图标 -- >
首页 <!-- 显示 “ 首页 ” 文字 -- >
< / e l - m e n u - i t e m >
<!-- 动态生成子菜单 -- >
< sub -menu
v -for = " menu in menuList " < ! - - 遍 历 菜 单 列 表 - - >
: key = "menu.menuId" <!-- 设置唯一标识符 -- >
: menu = "menu" <!-- 传递当前菜单数据 -- >
: dynamicMenuRoutes = "dynamicMenuRoutes" <!-- 传递动态路由数据 -- >
> < / s u b - m e n u >
< / e l - m e n u >
< / div >
< / e l - a s i d e >
< / template >
< script >
import SubMenu from "@/components/index/IndexAsideSub" ; // 导入子菜单组件
export default {
data ( ) {
return {
menuList : [ ] , // 存储菜单列表
dynamicMenuRoutes : [ ] // 存储动态路由数据
} ;
} ,
components : {
SubMenu // 注册子菜单组件
} ,
mounted ( ) {
// 获取动态菜单数据并且渲染
this . menuList = JSON . parse ( sessionStorage . getItem ( "menuList" ) || "[]" ) ; // 从会话存储中获取菜单列表
this . dynamicMenuRoutes = JSON . parse ( // 从会话存储中获取动态路由数据
sessionStorage . getItem ( "dynamicMenuRoutes" ) || "[]"
) ;
} ,
methods : {
menuHandler ( path ) { // 定义菜单点击事件处理函数
this . $router . push ( { path : path } ) ; // 路由跳转到指定路径
}
}
} ;
< / script >
< style lang = "scss" scoped >
. index - aside {
margin - top : 80 px ; /* 设置顶部外边距 */
overflow : hidden ; /* 隐藏溢出内容 */
. index - aside - inner {
width : 217 px ; /* 设置内部容器宽度 */
height : 100 % ; /* 设置高度为100% */
overflow - y : scroll ; /* 纵向滚动条 */
}
}
< / style >
