一般在功能較多的後台會使用手風琴 Accordion 元件作為選單的收納，根據功能種類將分配到對應的收合選單中，以下介紹 Accordion 元件：

PrimeVue Accodion 提供 Accodion AccordionPanel、AccordionHeader 及 AccordionContent 元件使用，每個 AccordionPanel 必須攜帶一個唯一的 value 值作為指定開啟的選單。

一般使用寫法如下：

<Accordion value="0">
    <AccordionPanel value="0">
        <AccordionHeader>Header I</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Lorem ipsum dolor sit amet
            </p>
        </AccordionContent>
    </AccordionPanel>
    <AccordionPanel value="1">
        <AccordionHeader>Header II</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Lorem ipsum dolor sit amet
            </p>
        </AccordionContent>
    </AccordionPanel>
    <AccordionPanel value="2">
        <AccordionHeader>Header III</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Lorem ipsum dolor sit amet
            </p>
        </AccordionContent>
    </AccordionPanel>
</Accordion>

其中，AccordionPanel 上的 value 是唯一值，Accordion 上的 value 是指令要開啟的 panel 選單。

上述 Accordion 因為 value 是設定一個字串，所以每次僅能開啟一個 panel 選單，若要能不限制開啟的狀態，可改使用陣列設定，被開啟的 panel 選單其 value 皆會被加入到該陣列內。

<Accordion :value="['0']" multiple>
    <AccordionPanel value="0">
        <AccordionHeader>Header I</AccordionHeader>
        <AccordionContent>
            <p class="m-0">
                Lorem ipsum dolor sit amet
            </p>
        </AccordionContent>
    </AccordionPanel>
    ...
</Accordion>

動態選單

若選單列表為 API 回傳的動態選單，可透過 v-for 迴圈動態生成 Accrodion。

加上 checkActiveRoute 判斷當前的路由是否為選單上的項目，若為是則加上不同文字顏色區別。

<script setup>
...
const menuList = ref([
    {
        title: 'Header I',
        value: '0',
        items: [
            {
                name: 'page1',
                path: '/accordion/page1'
            }
        ]
    },
    {
        title: 'Header II',
        value: '1',
        items: [
            {
                name: 'page2',
                path: '/accordion/page2'
            }
        ]
    }
]);

const checkActiveRoute = (menuroute) => {
    return route.fullPath === menuroute.path;
}
</script>
    
<template>
	...
    <Accordion value="0">
        <AccordionPanel :value="menu.value" v-for="menu in menuList" :key="menu">
            <AccordionHeader>{{ menu.title }}</AccordionHeader>
            <AccordionContent>
                <router-link v-for="item in menu.items" :key="item" :to="item.path" :class="{ 'text-primary-500': checkActiveRoute(item, menu.value) }">{{ item.name }}</router-link>
            </AccordionContent>
        </AccordionPanel>
    </Accordion>
   ...
</template>

記錄下 Accordion 用於後台選單時，若使用者直接在網址列上輸入路由，則 Accordion 的展開應對應於該路由的所在選單，作法如下：

1. Accordion 的 value 改為變數。
2. 在上述 checkActiveRoute 再加上一個路由的判斷。

當進入該網頁時，判斷路由對應於選單內遠項的 path 屬性，若為是，則將 Accordion 的 value 設為該選單的 value。

<script setup>
...
const panelValue = ref('0');
const checkActiveRoute = (menuroute, value) => {
    if (route.fullPath === menuroute.path) {
        panelValue.value = value;   // 開啟該主選單
    }
    return route.fullPath === menuroute.path;
}
</script>

<template>
	...
    <Accordion :value="panelValue"> <!-- 改為變數 -->
        <AccordionPanel :value="menu.value" v-for="menu in menuList" :key="menu">
            <AccordionHeader>{{ menu.title }}</AccordionHeader>
            <AccordionContent>
                <router-link v-for="item in menu.items" :key="item" :to="item.path" :class="{ 'text-primary-500': checkActiveRoute(item, menu.value) }">{{ item.name }}</router-link>
            </AccordionContent>
        </AccordionPanel>
    </Accordion>
   ...
</template>

以下為直接在瀏覽器網址列上輸入 https://lina-shu.github.io/IT30/#/accordion/page2 的結果，選單會自動開啟 page2 所在的第二層。

參考連結：https://primevue.org/accordion