我的程式筆記: 🖽Ionic

顯示具有 🖽Ionic 標籤的文章。顯示所有文章

2025-09-24

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 ，從第一頁切換到第二頁是正常的

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

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

2025-07-29

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>

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

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