本文受眾是 Angular 初學者，沒有多級路由使用經驗，不知道登錄頁面與主頁跳轉的實現邏輯，相反，看到這里你就可以結束了，不要浪費時間。下面來看看小白對于登錄頁面的理解：

上圖中左邊是導航菜單欄，右邊的空白區(qū)域是 <router-outlet> 所在區(qū)域，即所有實現業(yè)務邏輯的組件都在這里顯示 - 點擊左邊導航欄的項目右側B區(qū)域就替換為對應的頁面，那么問題來了，登錄頁面要怎么做？

多級路由實現圖

圖有點大，看不清楚的放大點看吧。看了這個圖相信一部分人已經懂了實現原理了。如果還是不懂，來看下面的文字講解。

實現原理講解

本文案例以 Angular + ng-zorro-antd 來講解，如果使用了別的UI套件也沒關系，原理都是一樣的

• 使用命令 ng new logindemo 創(chuàng)建項目
• 在命令行界面使用 cd 切換當前路徑為上面創(chuàng)建的項目的根目錄下
• 使用命令 ng add ng-zorro-antd 向項目中添加UI套件
• 此時運行起來后大致就是本文的第一個圖片的顯示效果：左邊是導航菜單，右邊是變換顯示業(yè)務組件的區(qū)域
• 那么小白走到這里就被誤導了，產生了本文初的疑惑，下面開始來解扣了。

項目創(chuàng)建好了，下面介紹改造項目的步驟：

注釋掉文件 app.component.html 中的全部代碼，并且添加一行：<router-outlet></router-outlet>

創(chuàng)建布局組件 layout ，將文件 app.component.html 中被注釋的代碼拷貝來，那么本組件的效果就是本文的第一個圖片的布局效果了?？截悂淼拇a中自帶了路由插槽 <router-outlet></router-outlet> 那么到本頁面中的路由插槽實際就是二級路由了。二級路由的代碼如下：

const routes: Routes = [
 { 
  path:'',component:LayoutComponent,canActivate:[LayoutGuard],
  children:[
   { path: 'dbManager',loadChildren: () => 
    import('../dbmanager/dbmanager.module').then(m => m.DbmanagerModule) },

   { path: 'generateTree',loadChildren: () => 
    import('../gentree/gentree.module').then(m => m.GentreeModule) }
  ] 
 }
];

本組件的超鏈接中路徑寫法：<a routerLink="dbManager" >數據庫管理器</a>，之前創(chuàng)建項目時的默認寫法是：<a routerLink="/dbManager" >數據庫管理器</a>，即只是去掉了 dbManager 前面的斜線。

那么在文件 app.component.ts 組件關聯的路由文件 app-routing.module.ts 中的路由代碼如下：

const routes: Routes = [
 { path: '', pathMatch: 'full', redirectTo: '/layout' },
 { path: 'login', loadChildren: () => 
  import('./pages/login/login.module').then(m => m.LoginModule) },
 { path: 'layout',loadChildren: () => 
  import('./pages/layout/layout.module').then(m => m.LayoutModule)}
];

這里的路由設置表示，當訪問項目的空路徑 localhost:4200 時會自動導航到組件 layout ，又由于該組件有路由守衛(wèi)，如果沒有登錄那么會被轉發(fā)到登錄組件 login ，這個路由守衛(wèi)是寫在組件 layout 中的路由文件中的。當正常登錄狀態(tài)下打開組件 layout 的頁面時就達到了本文的第一個圖片的效果，右側顯示業(yè)務邏輯組件的頁面。

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

最新評論