Angular2重定向路由不会改变浏览器网址答案

【问题标题】：Angular2 Redirect route doesn't change browser urlAngular2重定向路由不会改变浏览器网址
【发布时间】：2017-05-15 13:00:56
【问题描述】：

尝试在我的 angular2 应用程序中创建重定向路线。

但我的问题是，当有人输入像“nopath”这样的无效路径时，用户会被重定向到“HomeComponent”，但网址仍然保留“/#/nopath”

我也想要redirectTo 路由来改变url！我应该如何做到这一点？

我应该在我的 HomeComponent 构造函数中添加一个 if 来检查当前 url 并更改他到 homecomponent 的路由吗？还是我缺少什么？

路线：

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, {useHash: true});

编辑：

试过了，但我没有重定向到主组件

const routes: Routes = [
  { path: '', pathMatch: 'full' , redirectTo: 'home' },
  { path: 'home', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', redirectTo: '' }
];

【问题讨论】：

可能不使用重定向路由，只使用“**”，组件：HomeComponent（而不是重定向）。（NM 尝试了几种方法，是的，我不会这样做）。
您使用的是最新的 Angular2 和路由器版本吗？我看到最近提到的一个类似问题，更新解决了它。
我用的是3.2.3版本的路由器，不知道怎么查看是否是最新版本
检查 GitHub 存储库中的 CHANGELOG.md
我不确定是否理解路由器 CHANGELOG.md 中的版本：github.com/angular/angular/blob/master/modules/%40angular/… 它说 3.0.0 - RC2 但我使用的是 3.2.3 版本，所以有些东西不在版本！

标签： angular angular2-routing

【解决方案1】：

你应该试试这个，

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo:'home'},  
   //<<<-----added redirectTo attribute

  { path: 'home', component: HomeComponent  },                
   //<<<----added this line


  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },

  { path: '**', component: HomeComponent }   //<<<--- updated line
];

【讨论】：

它不起作用，它将 nopath 保留在 url 中，并且我没有被重定向到 HomeComponent
我也尝试了 redirectTo: 'home' 并且它在浏览器中保留了错误的 url，我需要再次输入 push enter 以便它更改 url bu 重新加载应用程序完全...
** 我需要在浏览器 url 中再次推送输入以使应用程序重新加载并且可以正常工作.. 但这是一种奇怪的行为，我希望我的用户编写错误的 url 被重定向到我的 home 组件，带有 home url，无需重新加载应用程序
@Vince 我确定这不是错误。我们都一直在使用** 路径。
@Vince 问题在于redirectTo:''，因为patchMatch:full 发生了一些问题。您可以直接使用组件重定向它。正在更新答案。

【解决方案2】：

目前，我没有找到比破解 Angular2 路由器更好的方法。

这是我的解决方案，它不是解决问题的好方法......但至少它可以按我的意愿工作！

路线：

const routes: Routes = [
  { path: '', pathMatch: 'full', component: HomeComponent },
  { path: 'login', component: LoginComponent, canActivate: [AnonymousGuard] },
  { path: 'register', component: RegisterComponent, canActivate: [AnonymousGuard] },
  { path: 'users', component: UserComponent, canActivate: [AuthGuard] },
  { path: '**', component: HomeComponent, canActivate: [RedirectToHomeGuard] }
];

export const routing: ModuleWithProviders = RouterModule.forRoot(routes, { useHash: true });

RedirectToHomeGuard：

@Injectable()
export class RedirectToHomeGuard implements CanActivate {

  constructor(private router: Router) { }

  canActivate() {
    this.router.navigate(['/']);
    return false;
  }
}

你们认为这可能是一个很好的解决方案？

【讨论】：

【解决方案3】：

也许为时已晚，但我认为问题应该出在基本 href 标记上。我在 index.html 中使用了类似下面的代码：

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href=".">
</head>

基本上使用 href="."打破了路由。相反，如果您使用 href="/" 就可以了。

<head>
  <meta charset="utf-8">
  <title>MyCoolApp</title>
  <base href="/">
</head>

所以现在路由正常工作，所有不匹配的路由都将在“**”路径上结束，因为“/”被用作查找 *-bundle.js 文件的基本 url，它们将被找到。我认为这就是为什么当您导航到“/”时，一切都会再次正常运行。

【讨论】：

这不是原始问题/问题的答案。
问题的原因可能是路由使用相对路径而不是绝对路径，并且''相对于 nopath 将是 nopath。至少我的情况是这样。

【解决方案4】：

对我来说，这个问题是由在 AppModule 中导入包含 home 组件的模块引起的。

【讨论】：

你知道它已经 2 岁了吗？这是他们代码中的一个错误，因为它不再是问题了......当时我为应用程序使用了一个模块，所以你的期望是错误的。
@Vince 其他人也在参考这些答案