Question

我正在使用Angular 2 rc4并且我已经使用了这样的新路由

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: '', component: HomeComponent},
        { path: 'login', component: LoginComponent}
    ]
}]

对于此代码，我无法访问路由/login我只是想知道它总是重定向到根目录的错误，请帮助

Answer 1

Angular无法匹配任何路线：＆＃39;登录＆＃39;。请看下面的树：

                                  App
                                  /\
                                 /  \
                            Private Public
                                      /\
                                     /  \
                                   Home Login

然后代码如下：

export const routes: RouterConfig = [
  { path: '', redirectTo: 'public', pathMatch: 'full' },
  { path: 'private', component: PrivateComponent },
  { path: 'public', component: PublicComponent,
    children: [
      { path: '', redirectTo: 'home', pathMatch: 'full' },
      { path: 'home', component: HomeComponent},
      { path: 'login', component: LoginComponent}
    ]
  }
];

希望这有帮助！

Answer 2

This is an old thread - but no answer yet. If it helps anybody - I found that for my case by adding this to the RouterModule.forRoot options:

RouterModule.forRoot(appRoutes,
      { enableTracing: true } // <-- debugging purposes only
)

Angular.io router docs

I then found that a nested component was throwing an exception. After fixing, my routing worked. What was happening was that the routing was working it was just blowing up when it reached the load of that 1 component so angular just quits the page load and defaults to base URL. This is presumably for security reasons in case your failing component is affecting in page security?

Answer 3

我认为问题可能是根路径（PublicLayoutComponent）和第一个子（HomeComponent）具有相同的路径。

ie：导航到http://localhost:4200/

时，您希望看到哪个组件

尝试将其更改为此以查看是否有效？

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: 'home', component: HomeComponent},
        { path: 'login', component: LoginComponent}
    ]
}]

Answer 4

您拥有通用路径＆＃39;＆＃39;作为第一个元素，但您没有将pathMatch设置为full，因此该路径匹配所有内容。基于当前的角度路由器配置，它将在路由列表中找到第一个匹配并将用户发送到那里，在这种情况下＆＃39;＆＃39;将匹配一切，所以它总是去那里，并没有在路线列表中进一步走下去。请参阅此处的文档：https://angular.io/guide/router#configuration

我认为你应该：

const routes: RouterConfig = [{
    path: '',
    component: PublicLayoutComponent,
    children: [
        { path: '', component: HomeComponent, pathMatch: 'full'},
        { path: 'login', component: LoginComponent}
    ]
}]

Angular 2 Routing始终重定向到根路径

4 个答案: