Ionic:自从使用选项卡实现导航后,routerLink 不再工作
Ionic: routerLink does not work anymore since implementing navigation using tabs
自从我实现了标签栏后,我就无法在不使用标签栏的情况下进行导航。我想在标签栏之外进行一些导航。
标签栏
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="map">
<ion-icon name="map-outline"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="restaurant-list">
<ion-icon name="storefront-outline"></ion-icon>
<ion-label>Restaurants</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
标签路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'map',
loadChildren: () => import('../map/map.module').then(m => m.MapPageModule)
},
{
path: 'item-details',
loadChildren: () => import('../item-details/item-details.module').then(m => m.ItemDetailsPageModule)
},
{
path: 'restaurant-list',
loadChildren: () => import('../restaurant-list/restaurant-list.module').then(m => m.RestaurantListPageModule)
},
{
path: 'restaurant-details',
loadChildren: () => import('../restaurant-details/restaurant-details.module').then(m => m.RestaurantDetailsPageModule)
},
{
path: 'item-details',
loadChildren: () => import('../item-details/item-details.module').then(m => m.ItemDetailsPageModule)
},
]
},
{
path: '',
redirectTo: 'tabs/map',
pathMatch: 'full'
}
];
我不能再导航使用
<a routerLink='/restaurant-list'>Continue to view restaurants</a>
我也试过了,但还是不成功
<a routerLink='/tabs/restaurant-list'>Continue to view restaurants</a>
你尝试了吗
<a routerLink='tabs/restaurant-list'>Continue to view restaurants</a>
问题是我在导航的页面上有一个模式,所以当我导航时,模式仍然在新页面的顶部。我当时使用的是 Ionic Lab,所以在我进行常规的 ionic serve 之前,我并不知道导航实际上在工作。从那以后,我在正确的位置关闭了模态,一切都很好。
顺便说一句,这是使用 routerLink 的正确方法
<a routerLink='/tabs/restaurant-list' >Continue to view restaurants</a>
自从我实现了标签栏后,我就无法在不使用标签栏的情况下进行导航。我想在标签栏之外进行一些导航。
标签栏
<ion-tabs>
<ion-tab-bar slot="bottom">
<ion-tab-button tab="map">
<ion-icon name="map-outline"></ion-icon>
<ion-label>Map</ion-label>
</ion-tab-button>
<ion-tab-button tab="restaurant-list">
<ion-icon name="storefront-outline"></ion-icon>
<ion-label>Restaurants</ion-label>
</ion-tab-button>
</ion-tab-bar>
</ion-tabs>
标签路由
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TabsPage } from './tabs.page';
const routes: Routes = [
{
path: 'tabs',
component: TabsPage,
children: [
{
path: 'map',
loadChildren: () => import('../map/map.module').then(m => m.MapPageModule)
},
{
path: 'item-details',
loadChildren: () => import('../item-details/item-details.module').then(m => m.ItemDetailsPageModule)
},
{
path: 'restaurant-list',
loadChildren: () => import('../restaurant-list/restaurant-list.module').then(m => m.RestaurantListPageModule)
},
{
path: 'restaurant-details',
loadChildren: () => import('../restaurant-details/restaurant-details.module').then(m => m.RestaurantDetailsPageModule)
},
{
path: 'item-details',
loadChildren: () => import('../item-details/item-details.module').then(m => m.ItemDetailsPageModule)
},
]
},
{
path: '',
redirectTo: 'tabs/map',
pathMatch: 'full'
}
];
我不能再导航使用
<a routerLink='/restaurant-list'>Continue to view restaurants</a>
我也试过了,但还是不成功
<a routerLink='/tabs/restaurant-list'>Continue to view restaurants</a>
你尝试了吗
<a routerLink='tabs/restaurant-list'>Continue to view restaurants</a>
问题是我在导航的页面上有一个模式,所以当我导航时,模式仍然在新页面的顶部。我当时使用的是 Ionic Lab,所以在我进行常规的 ionic serve 之前,我并不知道导航实际上在工作。从那以后,我在正确的位置关闭了模态,一切都很好。
顺便说一句,这是使用 routerLink 的正确方法
<a routerLink='/tabs/restaurant-list' >Continue to view restaurants</a>