2016-07-24 240 views
2

以下路由配置有什么问题?即使有路线app/jungle,我也总是导航到**角路由器3通配符匹配

import {bootstrap} from '@angular/platform-browser-dynamic'; 


import { RouterConfig, provideRouter } from '@angular/[email protected]' 

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)); 

Here是一个笨蛋。 我使用@角/路由器@ 3.0.0-beta.2

回答

3

''pathMatch一个无效值。

pathMatch支持fullprefixprefix是默认值。

它设置为'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} 
] 

Plunker example

更新(根据下面的评论)

我完全不知道为什么尾随/使其工作,但我会使用无组件的父路线,而不是像

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 }] 

Plunker example

+0

哇,这实际上解决了这个问题,但如果我改变了'{ 道: '应用程序/',pathMatch: '全',redirectTo: '应用程序/家' }'来'{ 路径:'app',pathMatch:'full',redirectTo:'app/home' }(**注意路径属性**末尾的反斜杠)给出了和以前相同的问题。任何线索 – Lekhnath

+0

我没有看到斜线。我会再检查一次。 –

+0

我更新了我的答案。 –