angular中的默認路由怎么用

本篇內容介紹了“angular中的默認路由怎么用”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

0.前言

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

1.路由的功能及原理

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

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

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

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

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

也就是在用戶和網頁之間再加一道關卡，由這道關卡負責校驗用戶權限、確定具體訪問哪個頁面等。這就是路由的主要作用。

2.默認路由的使用

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

比如我們使用

ng g c teacher

創建一個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，它應該訪問的就是TeacherComponent這個組件，但是我們還沒有配置完。

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

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

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

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

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

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

如果一開始你需要看一個全屏頁面的話， 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)], // 初始化路由器，并讓它開始監聽瀏覽器的地址變化
exports: [RouterModule],
 
})
export class AppRoutingModule { }

同時不能忘記app.module.ts中也要通不加入組件。然后訪問

localhost:4200/stu 就可以看到新創建的頁面了

“angular中的默認路由怎么用”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！