Angular 深入理解Router

清疚 2022-05-14 00:22 108阅读 0赞

# 路由器 - 路由 #

###  ###

### 什么是路由？ ###

如果我们需要从一个页面链接到另一个页面，页面之间的跳转需要通过路由表来实现。（页面与页面之间跳转，点击不同的按钮跳转到不同的页面）

### <base href> ###

一般我们会将index.html作为<head>标记中的第一个子节点，以告诉路由器如何组成导航URL。

如果设置app文件夹为根路径 我们就可以在index.html中设置<base href=“/“>

在app.module.ts

### 1.引入路由模块 ###

import \{RouterModule, Routes\} from @angular/router

### 2.添加路由模块 ###

import：\[

BrowserModule，

RouterModule.forRoot（appRoutes）

### 3.创建路由 ###

const appRouters：Routes = \[

\{path：''，component：HomeComponent\}，//“”代表根路径

\{path：'user'，component：UserComponent\}, // user代表的是UserComponent

\{path: '\*\*', component: LoseComponent\} //\*\*是一个通配符，如果请求的URL在之前定义的路由的任何路径不匹配，路由器将以此路由。这对于显示“404 - 未找到” 页面或重定向到另一个路径非常有用。

\]。

接下来就是HTML中路由的讲解

### 4.创建路由链接 ###

RouterLink - 可以让你链接到应用程序的特定部分

href - 规定链接指向的页面的URL地址。如果不使用href属性，就不能使用下载，媒体，rel，目标以及类型属性

### 5.添加组件出口 ###

路由器的出口是用来显示路由出口的地方，相当于应用中的路由插座

<router-outlet></router-outlet>

实例（只给出了部分代码）

HTML：

nav-component.html（这里使用了bootstrap，不会在Angular中安装和使用的小伙伴可以看 - > [bootstrap][]）

<div class="navbar-fixed-container">
      <div class="navbar navbar-inverse navbar-fixed-top">
        <div role="navigation">
          <div class="container">
            <div class="nav navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a class="navbar-brand" href="/">
                <span itemprop="name" style="font-size: 20px">
                  <font style="vertical-align: inherit; color: #ffffff;"><font style="vertical-align: inherit; fpmtfont">Exam System</font></font>
                </span>
              </a>
            </div>
            <div class="navbar-collapse collapse">
              <ul class="nav navbar-nav navbar-left"style="font-size: 16px">
                <li><a routerLink="/homepage">HomePage</a></li>
                <li><a routerLink="/examination">Examination</a></li>
                <li><a routerLink="/practice">Practice</a></li>
                <li><a routerLink="/proposal">Proposal</a></li>
              </ul>
              <ul class="nav navbar-nav navbar-right"style="font-size: 16px">
                <li class="nav-item"><a class="navbar-link" href="#" routerLink="/register">register</a></li>
                <li class="nav-item"><a class="navbar-link" href="#" routerLink="/login">login</a></li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>

app.component.html

<app-nav></app-nav>
    
    <router-outlet></router-outlet>

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import {FormsModule} from '@angular/forms';
    import { AppComponent } from './app.component';
    import { HomePageComponent } from './home-page/home-page.component';
    import { ExaminationComponent } from './examination/examination.component';
    import { PracticeComponent } from './practice/practice.component';
    import { ProposalComponent } from './proposal/proposal.component';
    import { NavComponent } from './nav/nav.component';
    import { BottomComponent } from './bottom/bottom.component';
    import { LoginComponent } from './login/login.component';
    import { RegisterComponent } from './register/register.component';
    import {RouterModule, Routes} from '@angular/router';
    import { FilterPipe } from './filter.pipe';
    
    const appRoutes: Routes = [
      {path: '', component: HomePageComponent},
      {path: 'homepage', component: HomePageComponent},
      {path: 'examination', component: ExaminationComponent},
      {path: 'practice', component: PracticeComponent},
      {path: 'proposal', component: ProposalComponent},
      {path: 'login', component: LoginComponent},
      {path: 'register', component: RegisterComponent},
    ];
    
    @NgModule({
      declarations: [
        AppComponent,
        HomePageComponent,
        ExaminationComponent,
        PracticeComponent,
        ProposalComponent,
        NavComponent,
        BottomComponent,
        LoginComponent,
        RegisterComponent,
      ],
    
      imports: [
        BrowserModule,
        FormsModule,
        RouterModule.forRoot(appRoutes)
      ],
    
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }

结果显示：

![70][]

[bootstrap]: https://blog.csdn.net/xnh_565175944/article/details/82081010
[70]: /images/20220514/458da8db23274d5fb0202fd681d35759.png