Ionic 專案，無法切換頁面

我的 Ionic 專案有以下兩個 .vue 檔案（這邊僅列<template> tag 的 code）

<template>
	<ion-page>
		<ion-content class="ion-padding">
			<h1>登入</h1>
			<form ref="login-form" @submit="login">
				<ion-item>
					<ion-input name="mobile" label="手機號碼" placeholder="e.g. 0912345678" required/>
				</ion-item>

				<ion-item>
					<ion-input name="password" label="密碼" type="password" required/>
				</ion-item>
				<ion-button expand="full" class="ion-margin-top" type="submit">
					登入
				</ion-button>
			</form>
		</ion-content>
	</ion-page>

	 <ion-alert :is-open="alertButtonShow"
		header="登入失敗"
		message="帳號或密碼錯誤，請再試一次。"
		:buttons="[{
				text: 'OK',
				role: 'confirm',
				handler: () => {
					alertButtonShow = false
				},
			}
		]" />
</template>

<template>
	<ion-page>
		<ion-content >
			<ion-header :translucent="true" >
				<ion-toolbar>
					<ion-title>登入成功！</ion-title>
				</ion-toolbar>
			</ion-header>

			<ion-button @click="logout">
				登出
			</ion-button>
		</ion-content>
	</ion-page>
</template>

理想狀況下，當我點下第一個畫面的登入按鈕，會跳到第二頁；第二頁的登出按鈕會跳回第一頁

但實際情況卻是前半段可以成功，但第二頁的登出按鈕一直沒有作用

如何查到原因

我一開始一直以為是 router 的問題，不斷調整 router 的用法，router.push、router.navigator等等都試過了

後來用 npm run dev 的方式，試著以瀏覽器看看畫面操作狀況，才發現會跳出以下 Warning

[Vue warn]: Extraneous non-props attributes (registerIonPage) were passed to component but could not be automatically inherited because component renders fragment or text or teleport root nodes.

經過查詢，這是因為第一頁的 code 害的

原因

上面提的這個警告，是因為 .vue 的 template 底下最外層的 children 有多個

以這邊的第一個 .vue 來說，他 <template>底下第一層 children 有 <ion-content>和<ion-alert> 2 個

這導致切換回第一個畫面出了問題

解決方法也很簡單，只要讓<template>底下第一層 children只有一個即可。例如以下兩種改法：

<template>
	<ion-page>
		<!-- 略 -->
		<ion-alert />
	</ion-page>
</template>

<template>
	<div>
		<ion-page>
			<!-- 略 -->
		</ion-page>
		<ion-alert />
	</div>
</template>

參考資料

Ama_Lee (2022). vue控制台报错Extraneous non-props attributes (class) were passed to component but could not be automatica. Csdn.net. https://blog.csdn.net/li_jia_h/article/details/123925787