角度路由器3通配符匹配

时间:2016-07-24 17:51:38

标签: angularjs angular

以下路线配置有什么问题?即使有**的路线,我也始终导航到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));

Here是一名傻瓜。 我正在使用@ angular / router @ 3.0.0-beta.2

1 个答案:

答案 0 :(得分: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