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)

相关推荐
小白变怪兽几秒前
一、react18+项目初始化(vite)
前端·react.js
ai小鬼头3 分钟前
AIStarter如何快速部署Stable Diffusion?**新手也能轻松上手的AI绘图
前端·后端·github
墨菲安全1 小时前
NPM组件 betsson 等窃取主机敏感信息
前端·npm·node.js·软件供应链安全·主机信息窃取·npm组件投毒
GISer_Jing1 小时前
Monorepo+Pnpm+Turborepo
前端·javascript·ecmascript
天涯学馆1 小时前
前端开发也能用 WebAssembly?这些场景超实用!
前端·javascript·面试
我在北京coding2 小时前
TypeError: Cannot read properties of undefined (reading ‘queryComponents‘)
前端·javascript·vue.js
前端开发与ui设计的老司机2 小时前
UI前端与数字孪生结合实践探索:智慧物流的货物追踪与配送优化
前端·ui
全能打工人3 小时前
前端查询条件加密传输方案(SM2加解密)
前端·sm2前端加密
海天胜景3 小时前
vue3 获取选中的el-table行数据
javascript·vue.js·elementui