Vue 3的菜單頁面更新帶來了一些重要的改變。在Vue 2中，我們通常使用Vue Router和動態路由來更新頁面。但是在Vue 3中，我們可以使用新的Composition API來簡化這個過程。

首先，我們需要定義我們的菜單項和每個項所對應的組件：

const menuItems = [
{ label: '首頁', component: Home },
{ label: '關于我們', component: About },
{ label: '聯系我們', component: Contact },
];

然后，在我們的菜單組件中，我們可以使用Composition API來管理當前選中的菜單項和對應的組件：

import { reactive } from 'vue';
export default {
setup() {
const state = reactive({
activeIndex: 0,
menuItems,
});
const setActiveIndex = (index) =>{
state.activeIndex = index;
};
return {
state,
setActiveIndex,
};
},
};

最后，我們可以在模板中動態渲染選中的組件：

<template>
<div>
<ul>
<li v-for="(item, index) in state.menuItems" :key="index" :class="{ active: index === state.activeIndex }" @click="setActiveIndex(index)">{{ item.label }}</li>
</ul>
<component :is="state.menuItems[state.activeIndex].component" />
</div>
</template>

通過使用Composition API，我們可以更加簡潔地管理菜單頁面的更新，并且讓我們的代碼更加可讀和易于維護。