Angular中的路由

---

---

前言

在Angular中，路由是用于在不同的视图和组件之间导航的机制。Angular提供了一种强大的路由机制来管理单页应用（SPA）中的导航。Angular 路由允许你定义应用的不同视图，并且可以在这些视图之间无缝地切换，而不需要重新加载整个页面。

一、创建路由

首先创建两个组件home和data组件

在app.routes.ts中配置路由

import { Routes } from '@angular/router';
import { DataComponent } from './components/data/data.component';
import { HomeComponent } from './components/home/home.component';
import { NotfoundComponent } from './components/notfound/notfound.component';export const routes: Routes = [// 主页路由  {path: 'home', // URL路径  component: HomeComponent // 要加载的组件  },// 关于页面路由  {path: 'data', // URL路径  component: DataComponent // 要加载的组件  },// 默认路由（可选）  {path: '', // 空路径，表示应用的根URL  redirectTo: 'home', // 重定向到主页路由  pathMatch: 'full' // 完全匹配空路径  },// 404路由（可选）  {path: '**', // 匹配所有未定义的路径  component: NotfoundComponent // 加载NotFoundComponent组件 }
];

在app.component.html中添加<router-outlet></router-outlet>

<header>header</header><p>这个是app</p><a href="/home">home</a>
<br/>
<a href="/data">data</a><router-outlet></router-outlet><footer>footer</footer>

执行效果

home页

data页

二、创建多个组件路由

app.routes.ts

import { Routes } from '@angular/router';
import { DataComponent } from './components/data/data.component';
import { HomeComponent } from './components/home/home.component';
import { NotfoundComponent } from './components/notfound/notfound.component';
import { BlogComponent } from './components/blog/blog.component';
import { AboutComponent } from './components/about/about.component';export const routes: Routes = [// 关于页面路由  {outlet: 'primary',path: 'data', // URL路径  component: DataComponent // 要加载的组件  },// 关于页面路由  {outlet: 'secondary',path: 'blog', // URL路径  component: BlogComponent // 要加载的组件  },// 关于页面路由  {outlet: 'tertiary',path: 'about', // URL路径  component: AboutComponent // 要加载的组件  },
];

app.component.html

<header>header</header><p>这个是app</p><!-- <a href="/home">home</a>
<br/>
<a href="/data">data</a> --><router-outlet name="primary"></router-outlet><router-outlet name="secondary"></router-outlet><router-outlet name="tertiary"></router-outlet><footer>footer</footer>

执行效果
输入http://localhost:4200/data(secondary:blog//tertiary:about)

http://localhost:4200/data(secondary:blog)

三、创建子路由

app.routes.ts

 //第一种写法// 关于页面路由  {path: 'about', // URL路径  component: AboutComponent, // 要加载的组件  children: [{path: 'about-first',component: AboutChildfirstComponent},{path: 'about-second',component: AboutChildsecondComponent}],},//第二种写法// {//     path:'about/about-first',//     component:AboutChildfirstComponent// },// {//     path:'about/about-second',//     component:AboutChildsecondComponent// },

这两种写法都可以

app.component.html

<header>header</header><p>这个是app</p><!-- <a href="/home">home</a>
<br/>
<a href="/data">data</a> --><router-outlet ></router-outlet><footer>footer</footer>

about.component.html

<p>about works!</p><router-outlet ></router-outlet>

执行效果

四、创建多个组件子路由

app.routes.ts

import { Routes } from '@angular/router';
import { DataComponent } from './components/data/data.component';
import { HomeComponent } from './components/home/home.component';
import { NotfoundComponent } from './components/notfound/notfound.component';
import { BlogComponent } from './components/blog/blog.component';
import { AboutComponent } from './components/about/about.component';
import { AboutChildfirstComponent } from './components/about-childfirst/about-childfirst.component';
import { AboutChildsecondComponent } from './components/about-childsecond/about-childsecond.component';export const routes: Routes = [// 关于页面路由  {outlet: 'primary',path: 'data', // URL路径  component: DataComponent // 要加载的组件  },// 关于页面路由  {outlet: 'secondary',path: 'blog', // URL路径  component: BlogComponent // 要加载的组件  },// 关于页面路由  {outlet: 'tertiary',path: 'about', // URL路径  component: AboutComponent, // 要加载的组件  children: [{outlet: 'primary',path: 'about-first',component: AboutChildfirstComponent},{outlet: 'secondary',path: 'about-second',component: AboutChildsecondComponent}],},
];

app.component.html内容不变

<header>header</header><p>这个是app</p><!-- <a href="/home">home</a>
<br/>
<a href="/data">data</a> --><router-outlet name="primary"></router-outlet><router-outlet name="secondary"></router-outlet><router-outlet name="tertiary"></router-outlet><footer>footer</footer>

about.component.html

<p>about works!</p><router-outlet name="primary"></router-outlet>
<router-outlet name="secondary"></router-outlet>

http://localhost:4200/data(secondary:blog//tertiary:about/(about-first//secondary:about-second))

http://localhost:4200/data(secondary:blog//tertiary:about/about-first)