无法匹配任何路由
Posted
技术标签:
【中文标题】无法匹配任何路由【英文标题】：Cannot match any routes 【发布时间】：2016-10-08 04:26:44 【问题描述】：我的组件出现了，但在页面加载时我收到一条错误消息。看了一堆资源，好像根本解决不了这个错误信息。
错误
EXCEPTION: Error: Uncaught (in promise): Cannot match any routes. Current segment: 'index.html'. Available routes: ['/login'].
main.component.ts 在 index.html 中，一旦页面加载，它就会显示上述错误消息。
import Component from '@angular/core';
import Routes, ROUTER_DIRECTIVES, ROUTER_PROVIDERS from '@angular/router';
import LoginComponent from './login/login.component';
@Component(
selector: 'main-component',
template:
' <header>
<h1>Budget Calculator</h1>
<a id='login' [routerLink]="['/login']">Login</a>
<router-outlet></router-outlet>
</header> '
directives: [ROUTER_DIRECTIVES],
providers: [ROUTER_PROVIDERS]
)
@Routes([
path: '/login', component: LoginComponent
])
export class MainComponent
login.component.ts 通过 main.component.ts 路由，并在我单击链接时显示，尽管出现错误消息。现在，我将其样式设置为弹出 main.component 中的其他元素，但希望它成为页面上唯一显示的组件。如果可能的话，基本上用 login.component 替换 index.html 中的 main.component，而不是做一大堆样式来显示：none。
import Component from '@angular/core';
@Component(
selector: 'login',
template:
' <div id="login-pop-up">
<h6 class="header_title">Login</h6>
<div class="login-body">
Some fancy login stuff goes here
</div>
</div> '
)
export class LoginComponent
【问题讨论】：
首先要检查的是是否有一个为相关路线指定的路线。 【参考方案1】： 这可能是因为您的服务器需要为 HTML5 pushState 进行配置，如Angular 2.0 router not working on reloading the browser 中所述还要确保您在<head> 标记的开头有一个<base href="/"> 标记或由boostrap(...) 提供，如Angular 2 router no base href set 中所述
/ 的路线，您可能需要像Angular2 router (@angular/router), how to set default route? 中解释的那样让应用程序强制导航到初始路线
提示：@angular/router 路由器也被弃用为@angular/router-deprecated，新的路由器将再次发货：-/ 如果您要切换到@angular/router，最好推迟直到新的（希望是最终的）路由器可用为止。
【讨论】：
我会等待新的路由器。你知道它什么时候发布吗？ 不，但我认为它具有很高的优先级。这引起了不小的轰动。新的 RC 将很快发货。让我们拭目以待，看看是否会包括新的路由器。 你能链接到关于新的非弃用路由器的讨论吗？ 新路由器是 RC.3 的一部分。 angular.io 上的路由器文档已经用于这个新路由器。 angular.io/docs/ts/latest/tutorial/toh-pt5.html 只是想发布一个直接链接....【参考方案2】：如果你有子组件并且你想用这种方式导航
路由器服务
const routes: Routes = [
path: '',
component: LoginComponent
,
path: 'home',
component: HomeComponent,
children: [
path: 'enter',
component: EnterDetailsComponent,
,
path: 'find',
component: FindDetailsComponent,
]
];
@NgModule(
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
)
export class AppRoutingModule
以这种方式使用 navigate([]) 方法
组件构造函数
this._router 就是这样来的
constructor( private _router: Router)
this._router.navigate(['/home/find']);
【讨论】：
【参考方案3】：当我遇到这个问题时，我通常会添加
<base href="./">
到 html 文件的<head> <base href="./"> </head>。
然后在NG2中导入任何文件时
import Auth from './auth.service';
这是根据documentation 做基础的首选方式，
【讨论】：
【参考方案4】：请确保 <base href="/"> 在你的 head 标签中，你可以像这样使用 useAsDefault: true attr ：
@Routes([
path: '/login', component: LoginComponent,useAsDefault: true
])
【讨论】：
@angular/router 中没有 useAsDefault :-/
据我所知，这还没有在@angular/router 中实现，也不会因为它将再次被替换。添加它不会导致错误，但它也没有任何效果。也许你正在使用@angular/router-deprecated？
是的，我使用@angular/router-deprecated，路由器和不推荐使用的路由器之间有什么区别？
不同之处在于两者都已弃用；-)。 @angular/router 是一个全新的实现，旨在取代 @angular/router-deprecated，但它也没有完全解决，他们也弃用了它。 @angular/router 有几个问题和缺失的功能。目前最好继续使用@angular/router-deprecated，直到新的新路由器发货并足够稳定。
tnxx 回答 ^-^【参考方案5】：
只需为 '' 添加一条路线，异常就会消失。
path: '',
component: HomeComponent
【讨论】：
应该是路径：'**' * 也应该可以工作，因为它可以匹配任何路径，而不仅仅是主路径 我试过了，它不起作用。你必须指定'**'以上是关于无法匹配任何路由的主要内容，如果未能解决你的问题，请参考以下文章
错误：无法匹配任何路由。 URL 段：“配置文件”或加载资源失败：服务器响应状态为 401（未授权）
IIS 6 上的 ASP.NET MVC - 通配符映射 - 传入请求与任何路由都不匹配