Ionic + Vue 在使用目錄時的狀況

使用的 Framework 是Ionic + Vue 3.5

我有兩個頁面，原本的 code 如下

<!-- 第一頁 -->

<template>
	<ion-page>
		<ion-header  >
			<ion-toolbar>
				<ion-title><h1>Foo</h1></ion-title>				
			</ion-toolbar>
		</ion-header>
		<ion-content>
			<!-- 中略 -->
		</ion-content>
	</ion-page>
</template>

<!-- 第二頁 -->

<template>
	<ion-menu content-id="main-content">
		<ion-header >
			<ion-toolbar color="tertiary">
				<ion-title>Menu Content</ion-title>
			</ion-toolbar>
			<ion-menu-toggle slot="end">
				<ion-button>Close</ion-button>
			</ion-menu-toggle>
		</ion-header>
		<ion-content class="ion-padding">
			<!-- 中略 -->
		</ion-content>
	</ion-menu>
	<ion-page id="main-content">
		<ion-header>
			<ion-toolbar>
				<ion-buttons slot="start">
					<ion-menu-button></ion-menu-button>
				</ion-buttons>
				<ion-title> BAR </ion-title>
			</ion-toolbar>
		</ion-header> 
		<ion-content class="ion-padding">
			<!-- 中略 -->
		</ion-content>
	</ion-page>
</template>

兩頁的差別在於，第二頁有 <ion-menu/>；第一頁沒有。

這樣的 code ，從第一頁切換到第二頁是正常的

但從第二頁切換回第一頁時，會出現以下錯誤：

1. <ion-header> 顯示的是第二頁的標題
2. 第一頁不存在的<ion-menu>依舊存在

解決辦法

總的來說，<ion-menu/> 只放在 App.vue，不放在個別頁面

App.vue 改成如下

<template>
	<ion-app>
		<ion-menu content-id="main-content">
			<!-- 中略 -->
		</ion-menu>
		<!-- Router outlet -->
		<ion-router-outlet id="main-content" />
	</ion-app>
</template>

1. 將 <ion-menu /> 改成放在 App.vue 之中
2. 加上 id（要和<ion-menu />的 content-id 相同）

之後把第二頁的<ion-menu />移除，變成如下即可：

<template> 
	<ion-page>
		<ion-header>
			<ion-toolbar>
				<ion-buttons slot="start">
					<ion-menu-button></ion-menu-button>
				</ion-buttons>
				<ion-title> BAR </ion-title>
			</ion-toolbar>
		</ion-header> 
		<ion-content class="ion-padding">
			<!-- 中略 -->
		</ion-content>
	</ion-page>
</template>

改完以後切換頁面都會正常了。

參考資料

Github Copilot 的回應加上我自己實際的測試結果

Github Copilot 是有給下面兩個參考資料啦，但實際上這兩者在這種狀況的敘述沒敘述的這麼詳盡，還是得自己測試才能知道

• Ionic Vue Menu 官方教學
• Ionic Menu 官方範例