這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)?lái)有關(guān)Angular 多級(jí)路由實(shí)現(xiàn)登錄頁(yè)面跳轉(zhuǎn)，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)成立與2013年，先為鐘祥等服務(wù)建站，鐘祥等地企業(yè)，進(jìn)行企業(yè)商務(wù)咨詢服務(wù)。為鐘祥企業(yè)網(wǎng)站制作PC+手機(jī)+微官網(wǎng)三網(wǎng)同步一站式服務(wù)解決您的所有建站問(wèn)題。

多級(jí)路由實(shí)現(xiàn)圖

圖有點(diǎn)大，看不清楚的放大點(diǎn)看吧。看了這個(gè)圖相信一部分人已經(jīng)懂了實(shí)現(xiàn)原理了。如果還是不懂，來(lái)看下面的文字講解。

實(shí)現(xiàn)原理講解

本文案例以 Angular + ng-zorro-antd 來(lái)講解，如果使用了別的UI套件也沒(méi)關(guān)系，原理都是一樣的

• 使用命令 ng new logindemo 創(chuàng)建項(xiàng)目

• 在命令行界面使用 cd 切換當(dāng)前路徑為上面創(chuàng)建的項(xiàng)目的根目錄下

• 使用命令 ng add ng-zorro-antd 向項(xiàng)目中添加UI套件

• 此時(shí)運(yùn)行起來(lái)后大致就是本文的第一個(gè)圖片的顯示效果：左邊是導(dǎo)航菜單，右邊是變換顯示業(yè)務(wù)組件的區(qū)域

• 那么小白走到這里就被誤導(dǎo)了，產(chǎn)生了本文初的疑惑，下面開始來(lái)解扣了。

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

注釋掉文件 app.component.html 中的全部代碼，并且添加一行：

創(chuàng)建布局組件 layout ，將文件 app.component.html 中被注釋的代碼拷貝來(lái)，那么本組件的效果就是本文的第一個(gè)圖片的布局效果了?？截悂?lái)的代碼中自帶了路由插槽 那么到本頁(yè)面中的路由插槽實(shí)際就是二級(jí)路由了。二級(jí)路由的代碼如下：

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

本組件的超鏈接中路徑寫法：數(shù)據(jù)庫(kù)管理器，之前創(chuàng)建項(xiàng)目時(shí)的默認(rèn)寫法是：數(shù)據(jù)庫(kù)管理器，即只是去掉了 dbManager 前面的斜線。

那么在文件 app.component.ts 組件關(guān)聯(lián)的路由文件 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)}
];

上述就是小編為大家分享的Angular 多級(jí)路由實(shí)現(xiàn)登錄頁(yè)面跳轉(zhuǎn)了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。