您好,登錄后才能下訂單哦!
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)Angular 多級(jí)路由實(shí)現(xiàn)登錄頁面跳轉(zhuǎn),文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述,閱讀完這篇文章希望大家可以有所收獲。
多級(jí)路由實(shí)現(xiàn)圖
圖有點(diǎn)大,看不清楚的放大點(diǎn)看吧??戳诉@個(gè)圖相信一部分人已經(jīng)懂了實(shí)現(xiàn)原理了。如果還是不懂,來看下面的文字講解。
實(shí)現(xiàn)原理講解
本文案例以 Angular + ng-zorro-antd 來講解,如果使用了別的UI套件也沒關(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)行起來后大致就是本文的第一個(gè)圖片的顯示效果:左邊是導(dǎo)航菜單,右邊是變換顯示業(yè)務(wù)組件的區(qū)域
那么小白走到這里就被誤導(dǎo)了,產(chǎn)生了本文初的疑惑,下面開始來解扣了。
項(xiàng)目創(chuàng)建好了,下面介紹改造項(xiàng)目的步驟:
注釋掉文件 app.component.html 中的全部代碼,并且添加一行:<router-outlet></router-outlet>
創(chuàng)建布局組件 layout ,將文件 app.component.html 中被注釋的代碼拷貝來,那么本組件的效果就是本文的第一個(gè)圖片的布局效果了。拷貝來的代碼中自帶了路由插槽 <router-outlet></router-outlet> 那么到本頁面中的路由插槽實(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) } ] } ];
本組件的超鏈接中路徑寫法:<a routerLink="dbManager" >數(shù)據(jù)庫管理器</a>,之前創(chuàng)建項(xiàng)目時(shí)的默認(rèn)寫法是:<a routerLink="/dbManager" >數(shù)據(jù)庫管理器</a>,即只是去掉了 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)登錄頁面跳轉(zhuǎn)了,如果剛好有類似的疑惑,不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。