0.前言

前一段時(shí)間折騰angular的路由折騰的夠嗆， 這篇文章簡(jiǎn)單介紹一下自己的理解及用法。

1.路由的功能及原理

一開(kāi)始并不理解路由的存在，因?yàn)閷W(xué)習(xí)html的時(shí)候，訪問(wèn)模式是下面這樣子：

也就是網(wǎng)址會(huì)直接訪問(wèn)到我們的頁(yè)面。那這樣有不好嗎？或者說(shuō)有什么問(wèn)題嗎？一個(gè)小demo確實(shí)沒(méi)有什么問(wèn)題？但是設(shè)想兩個(gè)情景。

情景1：在一個(gè)功能/頁(yè)面的的前提下有很多子功能或者子頁(yè)面。我們這個(gè)時(shí)候可能會(huì)多建一個(gè)文件夾來(lái)區(qū)分這些功能或者頁(yè)面。越多的話(huà)越難管理。

情景2:安全及權(quán)限類(lèi)問(wèn)題，因?yàn)樗械腢RL都可以直接訪問(wèn)網(wǎng)頁(yè)，無(wú)法區(qū)分不同權(quán)限的用戶(hù)可以訪問(wèn)哪些頁(yè)面，這個(gè)在一個(gè)成型的網(wǎng)站中是必備的功能，因?yàn)槟悴豢赡苋斡梢粋€(gè)普通用戶(hù)訪問(wèn)管理員用戶(hù)才有的功能。

angular中的路由主要就是完成這些事的，可以用下面這張圖來(lái)簡(jiǎn)單表示下

也就是在用戶(hù)和網(wǎng)頁(yè)之間再加一道關(guān)卡，由這道關(guān)卡負(fù)責(zé)校驗(yàn)用戶(hù)權(quán)限、確定具體訪問(wèn)哪個(gè)頁(yè)面等。這就是路由的主要作用。

2.默認(rèn)路由的使用

angular項(xiàng)目使用ng指令創(chuàng)建的時(shí)候，設(shè)定有一個(gè)默認(rèn)路由。位置如下圖：

比如我們使用ng g c teacher

創(chuàng)建一個(gè)teacher組件

然后，上面的下面改成下面這樣：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { TeacherComponent } from './teacher/teacher.component';
 
const routes: Routes = [
{path:"tea",component:TeacherComponent}
];
 
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }

注：典型的angular路由（Route）有兩個(gè)屬性：

1.path:表示你訪問(wèn)的路徑，類(lèi)似于www.xxx.com/tea這種

2.component:表示你訪問(wèn)這個(gè)路徑指向具體哪個(gè)組件

比如說(shuō)上面的例子中，訪問(wèn)localhost:4200/tea，它應(yīng)該訪問(wèn)的就是TeacherComponent這個(gè)組件，但是我們還沒(méi)有配置完。

注意查看一下：app.module.ts中是否添加了AppRoutingModule和我們剛才添加的TeacherComponent 這個(gè)組件。

然后在app.component.html中添加下面的信息：

<router-outlet></router-outlet>
<div>
  這是默認(rèn)主頁(yè)
 </div> 

執(zhí)行ng serve。然后訪問(wèn)localhost:4200。你就會(huì)看到下面的頁(yè)面：

然后訪問(wèn)localhost:4200/tea。就會(huì)看到下面的頁(yè)面：

可以看到，我們剛才創(chuàng)建的組件被成功加載出來(lái)了。

如果一開(kāi)始你需要看一個(gè)全屏頁(yè)面的話(huà)， app.component.html只留一個(gè)<router-outlet></router-outlet>就行。

同理，如果需要展示其他頁(yè)面，通過(guò)ng 指令新建組件后，然后也是在app-routing.module.ts中加入類(lèi)似下面的代碼

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { StudentComponent } from './student/student.component';
import { TeacherComponent } from './teacher/teacher.component';
 
const routes: Routes = [
{path:"tea",component:TeacherComponent},
{path:"stu",component:StudentComponent}
];
 
@NgModule({
imports: [RouterModule.forRoot(routes)], // 初始化路由器，并讓它開(kāi)始監(jiān)聽(tīng)瀏覽器的地址變化
exports: [RouterModule],
 
})
export class AppRoutingModule { }

同時(shí)不能忘記app.module.ts中也要通不加入組件。然后訪問(wèn)localhost:4200/stu 就可以看到新創(chuàng)建的頁(yè)面了

到此這篇關(guān)于angular中的默認(rèn)路由的用法的文章就介紹到這了,更多相關(guān)angular默認(rèn)路由內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論