0.前言

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

1.路由的功能及原理

一開始并不理解路由的存在，因為學(xué)習(xí)html的時候，訪問模式是下面這樣子：

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

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

情景2:安全及權(quán)限類問題，因為所有的URL都可以直接訪問網(wǎng)頁，無法區(qū)分不同權(quán)限的用戶可以訪問哪些頁面，這個在一個成型的網(wǎng)站中是必備的功能，因為你不可能任由一個普通用戶訪問管理員用戶才有的功能。

angular中的路由主要就是完成這些事的，可以用下面這張圖來簡單表示下

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

2.默認路由的使用

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

比如我們使用ng g c teacher

創(chuàng)建一個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）有兩個屬性：

1.path:表示你訪問的路徑，類似于www.xxx.com/tea這種

2.component:表示你訪問這個路徑指向具體哪個組件

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

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

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

<router-outlet></router-outlet>
<div>
  這是默認主頁
 </div> 

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

然后訪問localhost:4200/tea。就會看到下面的頁面：

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

如果一開始你需要看一個全屏頁面的話， app.component.html只留一個<router-outlet></router-outlet>就行。

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

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)], // 初始化路由器，并讓它開始監(jiān)聽瀏覽器的地址變化
exports: [RouterModule],
 
})
export class AppRoutingModule { }

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

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

最新評論