vue 動態載入路由，渲染左側選單欄

洛飞發表於2024-10-15
Vue路由

需求

我們在route檔案中定義的路由是由子路由包裹進去的，它可能是無限級的。如何在vue的模板中渲染形成選單欄。

如圖：

解決方法

將選單欄單獨寫成子元件（注意頭部標籤：element-plus中是el-menu）仍然在父元件中。將配置路由資料傳入到子元件。子元件渲染一級路由。

一級路由再呼叫本身元件，從而遞迴的實現動態載入和無限級分類。

父元件程式碼

<el-menu
    class="el-menu-vertical"
    @open="handleOpen"
    @close="handleClose"
    background-color="$el-aside-background"
>
    <Menu :menuList="menuRoutes" />
</el-menu>

子元件程式碼

注意：子元件自己呼叫自己一定要給元件取名字，因為它沒有透過import的方式，它就不認識自己。

   <template v-for="(item, index) in menuList" :key="index">
        <!-- 一級路由 -->
        <template v-if="!item.children" >
            <el-menu-item v-if="!item.meta.isHidden" :index="item.path">
                <template #title>
                    <span>icon</span>&nbsp;{{ item.meta.title }}
                </template>
            </el-menu-item>
        </template>

        <!-- 有子路由，但是隻有一個 -->
        <el-menu-item
            v-if="item.children && item.children.length == 1 && !item.meta.isHidden"
            :index="item.path"
        >
            <template #title>
                <span>{{ item.children[0].meta.title }}</span>
            </template>
        </el-menu-item>

        <!-- 有子路由，並且有多個,遞迴呼叫自己 -->
        <el-sub-menu
            :index="item.name"
            v-if="item.children && item.children.length > 1"
        >
            <template #title
                ><span>{{ item.meta.title }}</span></template
            >
            <!-- 注意：這個需要一個元件名,並將子路由資料傳入自身元件中，元件名在下面的script標籤中用vue2語法定義 -->
            <Menu :menuList="item.children" />
        </el-sub-menu>
    </template>

相關文章