mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 20:33:32 +08:00
fix(vue): correctly determine leaving view when transitioning to a new instance of a previous page (#22655)
resolves #22654 resolves #22658
This commit is contained in:
Liam DeBeasi
@ -68,6 +68,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
path: 'two',
|
||||
component: () => import('@/views/NestedChildTwo.vue')
|
||||
},
|
||||
{
|
||||
path: ':id',
|
||||
component: () => import('@/views/Folder.vue')
|
||||
}
|
||||
]
|
||||
},
|
||||
@ -135,4 +139,6 @@ const router = createRouter({
|
||||
routes
|
||||
});
|
||||
|
||||
(window as any).debugRouter = router;
|
||||
|
||||
export default router
|
||||
|
||||
82
packages/vue/test-app/src/views/Folder.vue
Normal file
82
packages/vue/test-app/src/views/Folder.vue
Normal file
@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<ion-page data-pageid="folder">
|
||||
<ion-header :translucent="true">
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-menu-button></ion-menu-button>
|
||||
</ion-buttons>
|
||||
<ion-title>{{ folder }}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ion-content :fullscreen="true">
|
||||
<ion-header collapse="condense">
|
||||
<ion-toolbar>
|
||||
<ion-title size="large">{{ folder }}</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<div id="container">
|
||||
<strong class="capitalize">{{ folder }}</strong>
|
||||
<p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
|
||||
</div>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
|
||||
import { useRoute } from 'vue-router';
|
||||
import { ref, computed, watch } from 'vue';
|
||||
|
||||
export default {
|
||||
name: 'Folder',
|
||||
components: {
|
||||
IonButtons,
|
||||
IonContent,
|
||||
IonHeader,
|
||||
IonMenuButton,
|
||||
IonPage,
|
||||
IonTitle,
|
||||
IonToolbar,
|
||||
},
|
||||
setup() {
|
||||
const route = useRoute();
|
||||
const folder = ref(route.params.id || 'Inbox');
|
||||
const matchedFolder = computed(() => route.params.id);
|
||||
|
||||
watch(matchedFolder, () => {
|
||||
folder.value = matchedFolder.value as string;
|
||||
})
|
||||
|
||||
return { folder }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#container {
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
#container strong {
|
||||
font-size: 20px;
|
||||
line-height: 26px;
|
||||
}
|
||||
|
||||
#container p {
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
color: #8c8c8c;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#container a {
|
||||
text-decoration: none;
|
||||
}
|
||||
</style>
|
||||
@ -14,37 +14,37 @@
|
||||
</ion-header>
|
||||
|
||||
<ion-list>
|
||||
<ion-item router-link="/overlays">
|
||||
<ion-item button router-link="/overlays">
|
||||
<ion-label>Overlays</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/inputs">
|
||||
<ion-item button router-link="/inputs">
|
||||
<ion-label>Inputs</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/slides">
|
||||
<ion-item button router-link="/slides">
|
||||
<ion-label>Slides</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/navigation" id="navigation">
|
||||
<ion-item button router-link="/navigation" id="navigation">
|
||||
<ion-label>Navigation</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/routing" id="routing">
|
||||
<ion-item button router-link="/routing" id="routing">
|
||||
<ion-label>Routing</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/default-href" id="default-href">
|
||||
<ion-item button router-link="/default-href" id="default-href">
|
||||
<ion-label>Default Href</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/nested" id="nested">
|
||||
<ion-item button router-link="/nested" id="nested">
|
||||
<ion-label>Nested Router Outlet</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/tabs" id="tabs">
|
||||
<ion-item button router-link="/tabs" id="tabs">
|
||||
<ion-label>Tabs</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/tabs-secondary" id="tab-secondary">
|
||||
<ion-item button router-link="/tabs-secondary" id="tab-secondary">
|
||||
<ion-label>Tabs Secondary</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/lifecycle" id="lifecycle">
|
||||
<ion-item button router-link="/lifecycle" id="lifecycle">
|
||||
<ion-label>Lifecycle</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/delayed-redirect" id="delayed-redirect">
|
||||
<ion-item button router-link="/delayed-redirect" id="delayed-redirect">
|
||||
<ion-label>Delayed Redirect</ion-label>
|
||||
</ion-item>
|
||||
</ion-list>
|
||||
|
||||
@ -1,5 +1,16 @@
|
||||
<template>
|
||||
<ion-page data-pageid="routeroutlet">
|
||||
<ion-header>
|
||||
<ion-toolbar>
|
||||
<ion-buttons slot="start">
|
||||
<ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button>
|
||||
<ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button>
|
||||
<ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button>
|
||||
<ion-button id="spam" router-link="/nested/spam" router-direction="root">Spam</ion-button>
|
||||
<ion-button id="other" router-link="/nested/two" router-direction="root">Other</ion-button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
<ion-content>
|
||||
<ion-router-outlet></ion-router-outlet>
|
||||
</ion-content>
|
||||
@ -8,6 +19,10 @@
|
||||
|
||||
<script lang="ts">
|
||||
import {
|
||||
IonHeader,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonToolbar,
|
||||
IonContent,
|
||||
IonPage,
|
||||
IonRouterOutlet,
|
||||
@ -17,6 +32,10 @@ import { defineComponent } from 'vue';
|
||||
export default defineComponent({
|
||||
name: 'RouterOutlet',
|
||||
components: {
|
||||
IonHeader,
|
||||
IonButtons,
|
||||
IonButton,
|
||||
IonToolbar,
|
||||
IonContent,
|
||||
IonPage,
|
||||
IonRouterOutlet
|
||||
|
||||
@ -39,6 +39,10 @@
|
||||
<ion-item button @click="replace" id="replace">
|
||||
<ion-label>Replace to Navigation page</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item button router-link="/tabs/tab1" id="tab1">
|
||||
<ion-label>Go to /tabs/tab1</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
@ -17,18 +17,18 @@
|
||||
|
||||
<ExploreContainer name="Tab 1 page" />
|
||||
|
||||
<ion-item router-link="/tabs/tab1/child-one" id="child-one">
|
||||
<ion-item button router-link="/tabs/tab1/child-one" id="child-one">
|
||||
<ion-label>Go to Tab 1 Child 1</ion-label>
|
||||
</ion-item>
|
||||
<ion-item router-link="/nested" id="nested">
|
||||
<ion-item button router-link="/nested" id="nested">
|
||||
<ion-label>Go to Nested Outlet</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item router-link="/tabs-secondary" id="tabs-secondary">
|
||||
<ion-item button router-link="/tabs-secondary" id="tabs-secondary">
|
||||
<ion-label>Go to Secondary Tabs</ion-label>
|
||||
</ion-item>
|
||||
|
||||
<ion-item router-link="/tabs" id="tabs-primary">
|
||||
<ion-item button router-link="/tabs" id="tabs-primary">
|
||||
<ion-label>Go to Primary Tabs</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
|
||||
@ -15,17 +15,37 @@
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
<ExploreContainer name="Tab 2 page" />
|
||||
<ion-item button router-link="/routing" id="routing">
|
||||
<ion-label>Go to /routing</ion-label>
|
||||
</ion-item>
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { IonButtons, IonBackButton, IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
|
||||
import ExploreContainer from '@/components/ExploreContainer.vue';
|
||||
import {
|
||||
IonButtons,
|
||||
IonBackButton,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent
|
||||
} from '@ionic/vue';
|
||||
|
||||
export default {
|
||||
name: 'Tab2',
|
||||
components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
|
||||
}
|
||||
export default {
|
||||
components: {
|
||||
IonButtons,
|
||||
IonBackButton,
|
||||
IonItem,
|
||||
IonLabel,
|
||||
IonPage,
|
||||
IonHeader,
|
||||
IonToolbar,
|
||||
IonTitle,
|
||||
IonContent
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
<ion-title size="large">Tab 3</ion-title>
|
||||
</ion-toolbar>
|
||||
</ion-header>
|
||||
|
||||
|
||||
<ExploreContainer name="Tab 3 page" />
|
||||
</ion-content>
|
||||
</ion-page>
|
||||
@ -25,4 +25,4 @@ export default {
|
||||
name: 'Tab3',
|
||||
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user