Angular中的路由

文章目录

Angular中的路由

前言

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

一、创建路由

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

在app.routes.ts中配置路由

csharp 复制代码

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>

csharp 复制代码

<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

csharp 复制代码

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

csharp 复制代码

<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

csharp 复制代码

 //第一种写法
 // 关于页面路由  
    {

        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

csharp 复制代码

<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

csharp 复制代码

<p>about works!</p>

<router-outlet ></router-outlet>

执行效果

四、创建多个组件子路由

app.routes.ts

csharp 复制代码

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内容不变

csharp 复制代码

<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

csharp 复制代码

<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)