vue3+element-plus动态路由菜单示例代码
更新时间:2023年11月25日 15:18:01 作者:qq_39196447
这篇文章主要介绍了vue3+element-plus动态路由菜单示例代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
1、展示效果图
2、创建组件 SideMenu.vue
<!-- 侧边栏组件 --> <template> <div> <el-menu :default-active="activeIndex" background-color="#001529" text-color="#ffffff"> <template v-for="(item, index) in menuList" :key="item.path"> <!-- 没有子路由 --> <template v-if="!item.children"> <el-menu-item :index="item.path" v-if="!item.mate.hidden" @click="goPage"> <template #title> <i class="iconfont" :class="item.mate.icon"></i> <label>{{ item.mate.title }}</label> </template> </el-menu-item> </template> <!-- 只有一个子路由 --> <template v-if="item.children && item.children.length == 1"> <el-menu-item v-if="!item.children[0].mate.hidden" :index="item.children[0].path" @click="goPage"> <template #title> <i class="iconfont" :class="item.children[0].mate.icon"></i> <label>{{ item.children[0].mate.title }}</label> </template> </el-menu-item> </template> <!-- 有两个及以上子路由 --> <el-sub-menu v-if="item.children && item.children.length > 1" :index="item.path"> <template #title> <i class="iconfont" :class="item.mate.icon"></i> <label>{{ item.mate.title }}</label> </template> <!-- 递归组件 --> <side-menu :menuList="item.children"></side-menu> </el-sub-menu> </template> </el-menu> </div> </template> <script setup lang="ts"> import { ref } from 'vue'; import { useRouter } from 'vue-router'; defineProps(['menuList']); const activeIndex = ref('1'); const $router = useRouter(); // 路由跳转 const goPage = (vc) => { $router.push(vc.index); }; </script> <script lang="ts"> // 当前组件的名称 用于递归组件使用 export default { name: 'SideMenu', }; </script> <style scoped lang="scss"> .el-menu { border-right: none; .iconfont { padding-right: 6px; } } </style>
3、路由示例
icon使用的是阿里巴巴图标库,需要下载在index.html全局引入
路由先存到store里面
创建routes.ts
export const constantRoute = [ { path: '/login', name: 'login', component: () => import('@/views/login/login.vue'), mate: { title: '登录', //菜单标题 hidden: true, //是否隐藏:true隐藏,false不隐藏,默认hidden隐藏 }, }, { path: '/', name: 'layout', redirect: '/home', component: () => import('@/layout/index.vue'), mate: { title: 'layout', //菜单标题 hidden: true, //是否隐藏:true隐藏,false不隐藏 icon: '', //iconfont 名称 }, children: [ { path: '/home', name: 'home', component: () => import('@/views/home/home.vue'), mate: { title: '首页', //菜单标题 icon: 'icon-shouye1', //iconfont 名称 }, }, ], }, { path: '/screen', name: 'screen', component: () => import('@/views/screen/index.vue'), mate: { title: '数据大屏', //菜单标题 icon: 'icon-zonghefenxipingtai', }, }, { path: '/404', name: '404', component: () => import('@/views/404/index.vue'), mate: { title: '404', //菜单标题 hidden: true, //是否隐藏:true隐藏,false不隐藏 }, }, ];
4、在页面中使用
<el-scrollbar class="scroll-bar"> <side-menu :menuList="userStore.menuRoutes"></side-menu> </el-scrollbar> <script setup lang="ts"> import useUserStore from '@/store/modules/user'; let userStore = useUserStore(); </script>
到此这篇关于vue3+element-plus动态路由菜单的文章就介绍到这了,更多相关vue3 element-plus路由菜单内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
相关文章
Vue3.0利用vue-grid-layout插件实现拖拽布局
这篇文章主要介绍了Vue3.0利用vue-grid-layout插件实现拖拽布局,工作中难免遇到需要对页面布局进行拖拽然后改变布局,保存布局,下面文章就围绕Vue3.0利用vue-grid-layout插件实现拖拽布局的相关资料展开详细内容,需要的朋友可以参考一下2021-11-11在Vue项目中使用jsencrypt.js对数据进行加密传输的方法
这篇文章主要介绍了在Vue项目中使用jsencrypt.js对数据进行加密传输的方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04Vue3视频播放器组件Vue3-video-play新手入门教程
这篇文章主要给大家介绍了关于Vue3视频播放器组件Vue3-video-play新手入门教程的相关资料,本文实例为大家分享了vue-video-player视频播放器的使用配置,供大家参考,需要的朋友可以参考下2023-12-12
最新评论