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

創(chuàng)新互聯(lián)公司服務項目包括臨猗網(wǎng)站建設(shè)、臨猗網(wǎng)站制作、臨猗網(wǎng)頁制作以及臨猗網(wǎng)絡營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，臨猗網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務的客戶以成都為中心已經(jīng)輻射到臨猗省份的部分城市，未來相信會繼續(xù)擴大服務區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

圖有點大，看不清楚的放大點看吧?？戳诉@個圖相信一部分人已經(jīng)懂了實現(xiàn)原理了。如果還是不懂，來看下面的文字講解。

實現(xiàn)原理講解

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

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

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

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

• 此時運行起來后大致就是本文的第一個圖片的顯示效果：左邊是導航菜單，右邊是變換顯示業(yè)務組件的區(qū)域

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

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

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

創(chuàng)建布局組件 layout ，將文件 app.component.html 中被注釋的代碼拷貝來，那么本組件的效果就是本文的第一個圖片的布局效果了。拷貝來的代碼中自帶了路由插槽 <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" >數(shù)據(jù)庫管理器</a>，之前創(chuàng)建項目時的默認寫法是：<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 多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)成都網(wǎng)站設(shè)計公司行業(yè)資訊頻道。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

本文名稱：Angular多級路由實現(xiàn)登錄頁面跳轉(zhuǎn)-創(chuàng)新互聯(lián)
本文網(wǎng)址：http://www.rwnh.cn/article30/dcieso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供關(guān)鍵詞優(yōu)化、服務器托管、網(wǎng)站策劃、ChatGPT、App開發(fā)、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)