logo标签列表

Angular2重定向路由不改变浏览器URL

angularangular2-routing
4
尝试在我的angular2应用程序中创建重定向路由。但是我的问题是，当有人输入无效路径时，例如“nopath”，用户被重定向到“HomeComponent”，但URL仍然保持“/#/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: '' }
];
您IP地址为143.198.54.68，由于运营成本限制，当前对于免费用户的使用频率限制为每个IP每72小时10次对话，如需解除限制，请点击左下角设置图标按钮（手机用户先点击左上角菜单按钮）。 - Tim Consolazio
你是否正在使用最新的Angular2和Router版本？我最近看到一个类似的问题，更新后解决了。 - Günter Zöchbauer
我使用3.2.3版本的路由器，不知道如何检查是否有最新版本。 - Vince
请在 GitHub 存储库中查看 CHANGELOG.md。 - Günter Zöchbauer
我不确定我是否理解路由器 CHANGELOG.md 中的版本：https://github.com/angular/angular/blob/master/modules/%40angular/router/CHANGELOG.md，它说是 3.0.0 - RC2，但我使用的是 3.2.3 版本，所以版本好像有些不对！ - Vince
4个回答
4

目前，我还没有找到比黑客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 });

重定向到主页守卫：

@Injectable()
export class RedirectToHomeGuard implements CanActivate {

  constructor(private router: Router) { }

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

你们觉得这可能是一个好的解决方案吗？
2
对我来说，这个问题是由于在AppModule中导入包含主页组件的模块引起的。
你知道这已经是两年前的事了吗？那是他们代码里的一个漏洞，因为现在已经不是问题了...而且那时我只使用了一个模块来运行应用程序，所以你的期望是错误的。 - Vince
3
@Vince，其他人也在参考这些答案。 - MDave
0

你应该试一下这个，

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
];
我99%确定这是因为您使用了HashlocationStrategy。如果您不是非常需要它，我建议您将其删除，然后它应该可以工作并且URL会改变。目前似乎没有任何解决方法，除非您自己想出一个 :) - AT82
@micronyks 好的，那么这只是针对我自己的问题。当我出于好奇测试时，问题也出现在我这里。而且 Vince，我怀疑你需要它，否则你为什么会使用它呢？抱歉，我无法帮助你。也许我会尝试调整我的代码，看看能否想出什么解决方案。不过我觉得可能性不大 :D - AT82
尽管micronlyks说这不应该有影响，我很尊重他的意见，因为我认为他比我更有经验。但是在我看来，当我在我的应用程序中添加了useHash: true时，问题也出现了，而在删除它时，该问题在没有存在的应用程序中不存在。所以我认为这是可疑的，如果是这样，就应该报告，因为这是一件非常令人恼火的事情！ - AT82
1
@Vince，我确定这不是一个错误。我们一直在使用 ** 路径。 - micronyks
1
@Vince的问题出在redirectTo:''，因为使用了patchMatch:full导致出现问题。你可以直接使用组件进行重定向。更新答案。 - micronyks
显示剩余8条评论
-1
也许有点晚了，但我认为问题应该与基本 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>

现在路由已经起作用了，所有不匹配的路由都将最终落在“**”路径上，由于“/”被用作基本URL来查找* -bundle.js文件，因此它们将被找到。我认为这就是为什么当您导航到“/”时一切都能正常工作的原因。

这不是对原问题的答案/解决方案。 - Chris Haines
问题的原因可能是路由使用相对路径而不是绝对路径，' ' 相对于无路径将成为无路径。至少在我的情况下是这样的。 - Siavash Outadi
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接