网站模版html,泰安神秀网络科技有限公司,生鲜市场型网站开发,沈阳seo排名优化教程菜单是几乎是每个管理系统的软件系统中不可或缺的#xff0c;element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发#xff0c; 该组件内置和vue-router的集成#xff0c;使用起来很方便。
主要组件如下
el-menu 顶级菜单组件
主要属性 mode:决定菜单的展示模式…菜单是几乎是每个管理系统的软件系统中不可或缺的element-plus提供的菜单组件可以快速完成大部分的菜单的需求开发 该组件内置和vue-router的集成使用起来很方便。
主要组件如下
el-menu 顶级菜单组件
主要属性 mode:决定菜单的展示模式水平或者垂直。 router:是否启用vue-router el-sub-menu 子菜单组件
子菜单组件如果子菜单还有子菜单可进行多层嵌套 index属性是比较重要的推荐设置
el-menu-item-group
菜单项组组件 主要属性 title:标识分组类别
el-menu-item
菜单项组件 index属性如果启用vue-router此属性需要跟vue-router的路由的path保持一致。 route可不设置如果设置了前者
示例
script setup langts
import { onMounted, reactive, ref, watch } from vue
import { RouterLink, RouterView,useRoute,useRouter } from vue-router
import type {MenuItemRegistered} from element-plusconst selectEvent(obj:MenuItemRegistered){console.log(obj.index)
}/scripttemplatedivel-containerel-header/el-headerel-mainel-rowel-col :span12h5未来manager/h5el-menu router default-active/aboutel-sub-menu indexuserCentertemplate #titleel-iconlocation //el-iconspan系统管理/span/templateel-menu-item-group title用户centerel-menu-item index/ clickselectEvent用户管理/el-menu-itemel-menu-item index/about clickselectEvent用户组管理/el-menu-item/el-menu-item-group/el-sub-menu/el-menu/el-colel-col :span12router-view v-slot{ Component }keep-alive component :isComponent :key$route.fullPath //keep-alive/router-view/el-col/el-row/el-mainel-footer/el-footer/el-container/div/templatestyle scoped/style
import { createRouter, createWebHashHistory } from vue-router
import HomeView from ../views/HomeView.vue
import ChatRoom from /components/ChatRoom.vue;const router createRouter({history: createWebHashHistory(import.meta.env.BASE_URL),routes: [{path: /,name: home,component: HomeView},{path: /about,name: about,// route level code-splitting// this generates a separate chunk (About.[hash].js) for this route// which is lazy-loaded when the route is visited.component: ChatRoom}]
})export default router https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes
