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)

相关推荐
开开心心就好40 分钟前
电脑息屏工具,一键黑屏超方便
开发语言·javascript·电脑·scala·erlang·perl
江号软件分享41 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
秋田君7 小时前
深入理解JavaScript设计模式之命令模式
javascript·设计模式·命令模式
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
风吹落叶花飘荡8 小时前
2025 Next.js项目提前编译并在服务器
服务器·开发语言·javascript
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js