Angular2重定向路由不會改變瀏覽器網址

Question

試圖在我的 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: '' }
];

Answer 1

目前，我沒有找到比破解 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;
  }
}

你們認為這可能是一個很好的解決方案嗎？

Answer 2

對我來說，這個問題是由在 AppModule 中導入包含 home 組件的模塊引起的。

Answer 3

你應該試試這個

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
];

Answer 4

也許為時已晚，但我認為問題應該出在基本 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 文件。 我認為這就是為什么當您導航到“/”時一切都會再次運行。

Angular2重定向路由不會改變瀏覽器網址

問題描述

4 個解決方案

解決方案1
4 已采納 2016-12-31 17:55:12

解決方案2
2 2018-11-08 15:51:47

解決方案3
0 2016-12-31 15:30:00

解決方案4
-1 2017-10-09 19:47:52

Angular2重定向路由不會改變瀏覽器網址

問題描述

4 個解決方案

解決方案1 4 已采納 2016-12-31 17:55:12

解決方案2 2 2018-11-08 15:51:47

解決方案3 0 2016-12-31 15:30:00

解決方案4 -1 2017-10-09 19:47:52

解決方案1
4 已采納 2016-12-31 17:55:12

解決方案2
2 2018-11-08 15:51:47

解決方案3
0 2016-12-31 15:30:00

解決方案4
-1 2017-10-09 19:47:52