2019年8月14日 星期三

[Angular] 路由機制-PathLocationStrategy vs HashLocationStrategy

[Angular] 路由機制-PathLocationStrategy vs HashLocationStrategy

簡介

簡單記錄一下，如何設定Url PathLocationStrategy(不帶#)(預設)與HashLocationStrategy(帶#)。

PathLocationStrategy(預設)

  • 網址結構
    • http://localhost:4200/TestPage
  • app-routing.module.ts
    @NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
})
  • "HTML5 pushState" style.
  • src/index.html 在head標籤內加入<base href="/"> 設定相對基底路徑
    <head>
  <title>Title</title>
  <base href="/">
</head>

HashLocationStrategy

  • 網址結構
    • http://localhost:4200/#/TestPage
  • app-routing.module.ts
    const config: ExtraOptions = {
  useHash: false,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
})
  • "hash URL" style.

參考資料

如有錯誤或建議，歡迎留言指教，謝謝!!
(相關內容如有侵犯隱私或著作權，請協助通知刪除，感謝)

標籤：

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)