在后台项目中我们通常会需要展示菜单栏的需求

类似这种

• 但是在项目中我们要怎么去展示我们对应的菜单呢，要知道在开发中我们还要有权限管理，我们又要怎么去实现呢？

    {
        path: '/login',
        name: "Login",
        hidden: true,
        component: () => import("@/components/login-form.vue"),
    },
    {
        path: '*',
        name: "Nofound",
        hidden: true,
        component: () => import("@/views/errorPage/404.vue"),
    },
    {
        path: '/home',
        name: "用户管理",
        iconClass: 'el-icon-user-solid',
        component: () => import("@/views/home.vue"),
        children: [
            {
                path: '/home/user',
                name: '用户列表',
                iconClass: 'el-icon-s-grid',
                component: () => import("@/views/user/user-list.vue"),
                meta: {
                    title: '用户列表',
                    path: '/home/user'
                },
            },
            {
                path: '/home/userinfo',
                name: '用户信息',
                iconClass: 'el-icon-info',
                component: () => import("@/views/user/info-list.vue"),
                meta: {
                    title: '用户信息',
                    path: '/home/userinfo'
                },
            }
        ]
    },

这是我的路由配置

这里是我的菜单结构

      <el-menu
                router
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                :unique-opened="true"
                :default-active="currentMenu"
                background-color="#8759fe"
                text-color="#fff"
                active-text-color="#8759fe"
            >
                <template v-for="(item, index) in getMenus">
                    <el-submenu :index="index + ''" :key="index">
                        <template slot="title">
                            <span class="title"
                                ><i :class="item.iconClass"></i>
                                {{ item.name }}</span
                            >
                        </template>
                        <el-menu-item-group
                            v-for="(child, index) in item.children"
                            :key="index"
                        >
                            <el-menu-item :index="child.path"
                                ><i :class="child.iconClass"></i
                                >{{ child.name }}</el-menu-item
                            >
                        </el-menu-item-group>
                    </el-submenu>
                </template>
            </el-menu>

但是我们要考虑一个问题，并不是所有的页面但是需要展示在这边的，那我们怎么去做一个区分呢？

    {
        path: '/login',
        name: "Login",
        hidden: true,
        component: () => import("@/components/login-form.vue"),
    },
    {
        path: '*',
        name: "Nofound",
        hidden: true,
        component: () => import("@/views/errorPage/404.vue"),
    },

细心的朋友可能发现了这两个配置多了一个属性hidden:true,没错，我们就是通过添加属性的方式去改变我们的显示，所以我们需要过滤一下

    data() {
        return {
            menus: [],
        };
    },
    created() {
        this.menus = [...this.$router.options.routes];
    },
    mounted() {
        const currentMenu = this.$route.meta.path;
        this.$store.commit("tags/SET_CURRENTMENU", currentMenu);
    },
    watch: {
        $route(to, from) {
            const currentMenu = this.$route.meta.path;
            this.$store.commit("tags/SET_CURRENTMENU", currentMenu);
        },
    },
    computed: {
        getMenus() {
            return this.menus.filter((item) => !item.hidden);
        },
        ...mapState({
            currentMenu: (state) => state.tags.currentMenu,
        }),
    },

这样我们就能将一些不是菜单项的页面进行区分