Angular学习记录8：路由

最新推荐文章于 2025-01-07 09:20:15 发布

原创

最新推荐文章于 2025-01-07 09:20:15 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

本文是Angular学习笔记，主要介绍了Angular路由的基础配置，包括配置Routes、RouterOutlet和RouterLink。探讨了HTML5 routing strategy（PathLocationStrategy）和HashLocationStrategy的区别，并展示了如何创建路由参数和嵌套路由。同时，提到了登陆验证的实现，通过auth.service.ts和logged-in.guard.ts进行简单阐述，但未深入结合后端验证。

之前用过dva、umi等前端框架/库，对路由有一定的了解，所以学起来还好。

1 基础

页面就是路由。

There are three main components that we use to configure routing in Angular:

Routes describes the routes our application supports
RouterOutlet is a “placeholder” component that shows Angular where to put the content of each route
RouterLink directive is used to link to routes

首先搞了about、contact、home三个component

然后在app.module.ts中定义好路由：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';
import { HomeComponent } from './home/home.component';

// routing goes here
import {
  RouterModule,
  Routes
} from '@angular/router';

const routes: Routes = [
  // basic routes
  {path: '', redirectTo: 'home', pathMatch: 'full'},
  {path: 'home', component: HomeComponent},
  {path: 'about', component: AboutComponent},
  {path: 'contact', component: ContactComponent},
  {path: 'contactus', redirectTo: 'contact'},
];

@NgModule({
  d

最低0.47元/天解锁文章