Angular9 設(shè)置通配符路由

當(dāng)用戶試圖導(dǎo)航到那些不存在的應(yīng)用部件時，在正常的應(yīng)用中應(yīng)該能得到很好的處理。要在應(yīng)用中添加此功能，需要設(shè)置通配符路由。當(dāng)所請求的 `URL 與任何路由器路徑都不匹配時，Angular 路由器就會選擇這個路由。

要設(shè)置通配符路由，請?jiān)?routes 定義中添加以下代碼。

//AppRoutingModule (excerpt)


{ path: '**', component:  }

這兩個星號 ** 告訴 Angular，這個 routes 定義是通配符路由。對于 component 屬性，你可以使用應(yīng)用中的任何組件。常見的選擇包括應(yīng)用專屬的 PageNotFoundComponent，你可以定義它來向用戶展示 404 頁面，或者跳轉(zhuǎn)到應(yīng)用的主組件。通配符路由是最后一個路由，因?yàn)樗ヅ渌械?URL。有關(guān)路由順序的更多詳細(xì)信息，請參閱路由順序。

顯示 404 頁面

要顯示 404 頁面，請?jiān)O(shè)置一個通配符路由，并將 component 屬性設(shè)置為你要用于 404 頁面的組件，如下所示：

//AppRoutingModule (excerpt)


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
  { path: '**', component: PageNotFoundComponent },  // Wildcard route for a 404 page
];

path 為 ** 的最后一條路由是通配符路由。如果請求的 URL 與前面列出的路徑不匹配，路由器會選擇這個路由，并把該用戶送到 PageNotFoundComponent。

設(shè)置重定向

要設(shè)置重定向，請使用重定向源的 path、要重定向目標(biāo)的 component 和一個 pathMatch 值來配置路由，以告訴路由器該如何匹配 URL。

//AppRoutingModule (excerpt)


const routes: Routes = [
  { path: 'first-component', component: FirstComponent },
  { path: 'second-component', component: SecondComponent },
  { path: '',   redirectTo: '/first-component', pathMatch: 'full' }, // redirect to `first-component`
  { path: '**', component: FirstComponent },
];

在這個例子中，第三個路由是重定向路由，所以路由器會默認(rèn)跳到 first-component 路由。注意，這個重定向路由位于通配符路由之前。這里的 path: '' 表示使用初始的相對 URL（ '' ）。