角路由器3通配符匹配 [英] Angular router 3 wildcard matching
本文介绍了角路由器3通配符匹配的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
以下路由配置有什么问题?即使有app/jungle
的路线,我也总是导航到**
.
What is wrong with following route configuration? I am always navigated to **
even if there is a route for app/jungle
.
import {bootstrap} from '@angular/platform-browser-dynamic';
import { RouterConfig, provideRouter } from '@angular/router@3.0.0-beta.2'
import {App} from './app';
import { HomeComponent } from './home.component';
import { JungleComponent } from './jungle.component';
import { NotFoundComponent } from './not-found.component';
const APP_ROUTES: RouterConfig = [
{
path: '', pathMatch: '', redirectTo: 'app/home'
},
{
path: 'app/', pathMatch: '', redirectTo: 'app/home'
},
{
path: 'app/home', component: HomeComponent
},
{
path: 'app/jungle', component: JungleComponent
},
{
path: '**', component: NotFoundComponent
}
]
bootstrap(App, [provideRouter(APP_ROUTES)])
.catch(err => console.error(err));
这里是一个小矮人. 我正在使用@ angular/router @ 3.0.0-beta.2
推荐答案
''
是pathMatch
的无效值.
pathMatch
支持full
和prefix
. prefix
是默认设置.
pathMatch
supports full
and prefix
. prefix
is the default.
将前两条路径设置为'full'
:
{
path: '', pathMatch: 'full', redirectTo: 'app/home'
},
{
path: 'app/', pathMatch: 'full', redirectTo: 'app/home'
},
{
path: 'app/home', component: HomeComponent
},
{
path: 'app/jungle', component: JungleComponent
},
{
path: '**', component: NotFoundComponent}
]
更新(根据下面的评论)
我不确定到底为什么尾随/
使它起作用,但我会改用无组件父路线,例如
I don't know exactly why the trailing /
makes it work but I would use componentless parent routes instead like
const APP_ROUTES: RouterConfig = [
{ path: '', pathMatch: 'full', redirectTo: 'app/home' },
{ path: 'app', children: [
{ path: '', pathMatch: 'full', redirectTo: 'home' },
{ path: 'home', component: HomeComponent },
{ path: 'jungle', component: JungleComponent },
]},
{ path: '**', component: NotFoundComponent }]
这篇关于角路由器3通配符匹配的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文