2 09.侧边菜单开发 样式布局和路由跳转

src/layouts/components/FMain.vue

<template>
    <div class="f-menu">
        <el-menu default-active="2" class="border-0" @select="handleSelect">

        <template v-for="(item,index) in asideMenus" :key="index">
            <el-sub-menu v-if="item.child && item.child.length > 0" :index="item.name">
                <template #title>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </template>

                <el-menu-item v-for="(item2,index2) in item.child" :key="index2" :index="item2.frontpath">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
                </el-menu-item>
            </el-sub-menu>


            <el-sub-menu v-else :index="item.frontpath">
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <span>{{ item.name }}</span>
            </el-sub-menu>
        </template>

        </el-menu>
</div>
</template>


<script setup> 
import { useRouter } from "vue-router"

const router = useRouter()
// 自定义一些测试路由
const asideMenus = [
    {
        "name": "后台面板",
        "icon": "help",
        "child": [{
            "name": "主控台",
            "icon": "home-filled",
            "frontpath": "/",
        }]
    },
    {
        "name": "商城管理",
        "icon": "shopping-bag",
        "child": [{
            "name": "商品管理",
            "icon": "home-filled",
            "frontpath": "/good/list",
        }]
    },
]


const handleSelect = (e)=> {
    // console.log(e)
    router.push(e)
}

</script>


<style>
.f-menu {
    width: 250px;
    height: 100%;
    top: 64px;
    left: 0;
    overflow: auto;
    @apply shadow-md fixed bg-light-50;
}
</style>