vue aside从router中获取label和name

何月七

已于 2022-11-28 17:18:31 修改

阅读量197

点赞数

分类专栏：前端文章标签： vue.js javascript 前端

于 2022-07-18 20:00:06 首次发布

本文链接：https://blog.youkuaiyun.com/l963937050/article/details/125859039

版权

前端专栏收录该内容

14 篇文章

订阅专栏

本文介绍了如何使用 Vue.js 实现响应式的一级和二级菜单，同时结合Vuex和路由管理，实现基于用户权限的菜单显示。通过递归结构展示了如何根据路由和元数据动态生成菜单，并且隐藏了未授权的子菜单。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <el-menu :default-active="defaultPath" :collapse="props.isCollapse" router>
        <template v-for="(item1, index1) in menus" :key="index1">
            <!-- 一级菜单 -->
            <el-sub-menu :index="item1.path" v-if="(item1.children || []).length">
                <template #title>
                    <el-icon>
                        <component :is="item1.icon"></component>
                    </el-icon>
                    <span>{{item1.title}}</span>
                </template>
                <template v-for="(item2, index2) in (item1.children || [])" :key="index2">
                    <!-- 二级菜单 -->
                    <el-menu-item :index="item2.path">{{item2.title}}</el-menu-item>
                </template>
            </el-sub-menu>
            <!-- 一级菜单 -->
            <el-menu-item :index="item1.path" v-else>
                <el-icon>
                    <component :is="item1.icon"></component>
                </el-icon>
                <template #title>{{item1.title}}</template>
            </el-menu-item>
        </template>
    </el-menu>
</template>

<script setup>
    import { defineProps, computed } from 'vue'
    import { useStore } from 'vuex'
    import { useRoute } from 'vue-router'
    import { routes } from '@/router/routes'

    const { getters } = useStore()

    const hasPermission = computed(() => getters['login/hasPermission'])

    const props = defineProps({
        isCollapse: {
            type: Boolean,
            required: true
        }
    })

    const getMenus = (base = '/', list = []) => {
        return list.
            filter(i => (i.meta || {}).isMenu === true).
            map(i => {
                if (i.meta && i.meta.permissions && !hasPermission.value(...i.meta.permissions)) {
                    return {}
                }
                let obj = {
                    path: base + i.path,
                    title: i.meta.title,
                    icon: i.meta.icon || 'Operation'
                }
                if (i.children && i.children.length) {
                    let children = getMenus(base + i.path + '/', i.children)
                    if (!children.length) {
                        return {}
                    }
                    obj.children = children
                }
                return obj
            }).filter(i => i.path !== undefined)
    }
    const menus = getMenus((routes[0] || {}).path, (routes[0] || {}).children || [])


    const route = useRoute()
    const defaultPath = route.path ? route.path : ((menus[0] || {}).path || '')
</script>

<style lang="scss" scoped>
    .el-menu {
        border-right: none;
    }
</style>