-- 菜单项有children时,用el-sub-menu渲染 --> <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.index"> <template #title> <Icon v-if="menu.icon" :icon="menu.icon" class="mr-2 text-16px" /> <span class="font-600 text-16px">{{ menu.name }}</s...
1.在画面中添加子画面,使用el-menu菜单进行跳转,只更新子画面 a.首先在配置 router 路径的 js 文件中配置画面的路径,子画面的路径要在父画面的 children 下面 在父节点下设置redirect属性,打开父画面时会默认打开相应子画面,否则子画面默认显示为空白 b.在画面显示区域添加router-view标签 c.在菜单栏的 el-menu ...
<el-menu class="menu-main" router :default-active="route.path" unique-opened background-color="#18214C" text-color="#fff"> <menuItem v-for="item in menuList" :item="item" :key="item.path" /> </el-menu> </el-scrollbar> </aside> </template> <script setup> import menuItem fr...
key="item.path"/></el-menu></el-scrollbar></aside></template><script setup>importmenuItemfrom"./components/menuItem.vue"import{useRoute}from"vue-router"constroute=useRoute()constmenuList=[{path:"/index",component:()=>import("@/views/index.vue"),name:"index",meta:{title:"一级菜单"...
</el-menu> </template> <scriptsetup> importLeftSubMenufrom"@/components/LeftSubMenu.vue"; import{ computed }from"vue"; import{ useRouter }from"vue-router"; constopenedsArr = props.menuData.map((item) =>{ returnitem.path; });
<el-menu :default-openeds="['2', '3']" :default-active="activeMenu" @select="handleMenuSelect" router> <el-menu-item v-for="item in props.menuItems" :key="item.id" :index="item.route"> {{ item.title}} </el-menu-item> </el-menu> </el-scrollbar...
Vue3 的后台管理的项目想要做个菜单的话,一般会使用 VueRouter 设置路由,然后用UI库的菜单组件(比如 el-menu)设置各种属性,然后还需要考虑权限等问题。 这样做虽然很灵活,但是对于简单项目就有点麻烦。那么我们能不能简化一下操作,只设置一次,就可以实现菜单、路由外加权限的功能呢?
menu组件代码: <template><el-menuclass="el-menu-vertical-demo":default-active="props.defaultActive"router:collapse="collapse":background-color="commonStyle.primary"text-color="#fff"active-text-color="#304156"><menu-itemv-for="item in list":key="item.name":menu="item"/></el-menu></temp...
handleMenuSelect" router> <el-menu-item index="/home">Home</el-menu-item> <el-menu-item index="/about">About</el-menu-item> <el-sub-menu index="1"> <template #title> <el-icon>
这里el-menu添加router属性的意思就是让我们的菜单点击的时候启用路由功能,el-menu-item的index属性配置要和我们的路由的path一一对应 再一方面就是我们的主内容区域要添加路由视图,这样路由切换的时候页面会显示在这个区域里 <el-mainclass="content"><!-- 放置表格 --><router-view/></el-main> ...