首页 文章

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

提问于
浏览 次
4

试图在我的angular2应用程序中创建我的重定向路由 .

但我的问题是当有人进入像'nopath'这样的无效路径时，用户被重定向到'HomeComponent'，但是url仍保留'/＃/ nopath'

我希望redirectTo路由也改变网址！我该怎么做到这一点？

我应该在我的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: '' }
];
angular angular2-routing

4 回答

  • 0

    就目前而言，我没有找到比攻击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;
  }
}

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

    回复于
  • 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
];
    回复于
  • 4

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

    回复于
  • -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文件 . 我认为这就是为什么当你导航到“/”时，一切都会再次起作用 .

    回复于

相关问题