javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-20 20:33:32 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(vue): pages now render in correct outlet when using multiple nested outlets (#22301)

Browse Source 
resolves #22286
This commit is contained in:
Liam DeBeasi
2020-10-13 14:22:51 -04:00
committed by GitHub
parent fff82d0bdc
commit 52f655c9d4
16 changed files with 300 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/vue/test-app/src/router/index.ts
View File

@ -85,6 +85,28 @@ const routes: Array<RouteRecordRaw> = [
}
]
},
{
path: '/tabs-secondary/',
component: () => import('@/views/TabsSecondary.vue'),
children: [
{
path: '',
redirect: '/tabs-secondary/tab1'
},
{
path: 'tab1',
component: () => import('@/views/Tab1Secondary.vue')
},
{
path: 'tab2',
component: () => import('@/views/Tab2Secondary.vue')
},
{
path: 'tab3',
component: () => import('@/views/Tab3Secondary.vue')
}
]
}
]
const router = createRouter({

3
packages/vue/test-app/src/views/Home.vue
View File

@ -38,6 +38,9 @@
<ion-item router-link="/tabs" id="tabs">
<ion-label>Tabs</ion-label>
</ion-item>
<ion-item router-link="/tabs-secondary" id="tab-secondary">
<ion-label>Tabs Secondary</ion-label>
</ion-item>
</ion-list>
</ion-content>

1
packages/vue/test-app/src/views/NestedChild.vue
View File

@ -17,6 +17,7 @@
</ion-header>
<div class="ion-padding">
<ion-button router-link="/tabs/tab1" id="nested-tabs">Tab 1</ion-button>
<ion-button router-link="/nested/two" id="nested-child-two">Nested Child Two</ion-button>
</div>
</ion-content>

2
packages/vue/test-app/src/views/RouterOutlet.vue
View File

@ -1,5 +1,5 @@
<template>
<ion-page>
<ion-page data-pageid="routeroutlet">
<ion-content>
<ion-router-outlet></ion-router-outlet>
</ion-content>

11
packages/vue/test-app/src/views/Tab1.vue
View File

@ -20,6 +20,17 @@
<ion-item router-link="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-label>Go to Nested Outlet</ion-label>
</ion-item>
<ion-item 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-label>Go to Primary Tabs</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>

34
packages/vue/test-app/src/views/Tab1Secondary.vue Normal file
View File

@ -0,0 +1,34 @@
<template>
<ion-page data-pageid="tab1-secondary">
<ion-header>
<ion-toolbar>
<ion-buttons>
<ion-back-button default-href="/"></ion-back-button>
</ion-buttons>
<ion-title>Tab 1 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 1 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 1 page" />
<ion-item router-link="/tabs" id="tabs-primary">
<ion-label>Go to Primary Tabs</ion-label>
</ion-item>
</ion-content>
</ion-page>
</template>
<script>
import { IonButtons, IonBackButton, IonPage, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
export default {
components: { IonButtons, IonBackButton, ExploreContainer, IonHeader, IonItem, IonLabel, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

27
packages/vue/test-app/src/views/Tab2Secondary.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<ion-page data-pageid="tab2-secondary">
<ion-header>
<ion-toolbar>
<ion-title>Tab 2 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 2 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 2 page" />
</ion-content>
</ion-page>
</template>
<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
export default {
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

27
packages/vue/test-app/src/views/Tab3Secondary.vue Normal file
View File

@ -0,0 +1,27 @@
<template>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Tab 3 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ion-content :fullscreen="true">
<ion-header collapse="condense">
<ion-toolbar>
<ion-title size="large">Tab 3 - Secondary</ion-title>
</ion-toolbar>
</ion-header>
<ExploreContainer name="Tab 3 page" />
</ion-content>
</ion-page>
</template>
<script>
import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
import ExploreContainer from '@/components/ExploreContainer.vue';
export default {
components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
}
</script>

41
packages/vue/test-app/src/views/TabsSecondary.vue Normal file
View File

@ -0,0 +1,41 @@
<template>
<ion-page data-pageid="tabs-secondary">
<ion-content>
<ion-tabs id="tabs">
<ion-tab-bar slot="bottom">
<ion-tab-button tab="tab1" href="/tabs-secondary/tab1">
<ion-icon :icon="triangle" />
<ion-label>Tab 1</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab2" href="/tabs-secondary/tab2">
<ion-icon :icon="ellipse" />
<ion-label>Tab 2</ion-label>
</ion-tab-button>
<ion-tab-button tab="tab3" href="/tabs-secondary/tab3">
<ion-icon :icon="square" />
<ion-label>Tab 3</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
</ion-content>
</ion-page>
</template>
<script lang="ts">
import { IonTabBar, IonTabButton, IonTabs, IonContent, IonLabel, IonIcon, IonPage } from '@ionic/vue';
import { ellipse, square, triangle } from 'ionicons/icons';
export default {
name: 'Tabs',
components: { IonContent, IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage },
setup() {
return {
ellipse,
square,
triangle,
}
}
}
</script>