Angular 基础知识规整之路由

最新推荐文章于 2025-05-30 09:05:47 发布

iseebin

最新推荐文章于 2025-05-30 09:05:47 发布

阅读量429

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Angular 文章标签： angular

本文链接：https://blog.youkuaiyun.com/itseebin/article/details/77583932

本文介绍了Angular的路由基础知识，包括路由的概念、基本用法、路由懒加载、嵌套路由以及如何传递和获取路由参数。路由在Angular中用于控制页面的跳转和展示，通过在模块中配置路由，并使用`routerLink`等属性在HTML中实现页面间的导航。同时，文章探讨了路由懒加载的优势和实现方式，以及如何通过路由传递单个和多个参数。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Angular 路由基础知识大纲

什么是路由
路由的基本用法
路由懒加载异步模块
嵌套路由
传递和获取路由参数

一、什么是路由

路由，百度百科这样说的：路由是指路由器从一个接口上收到数据包，根据数据路由包的目的地址进行定向并转发到另一个接口的过程。

当然，这个定义对我们来说没什么卵用。

说白了，路由就是网址，在浏览器输入网址后可以跳转到相应的页面。因为有了路由，也才有我们浏览器的前进与后退。如果没有路由,浏览器的前进后退按钮没法用；如果没有路由,你也将无法把URL拷贝并分享给你的朋友。

目前已是21世纪，开发模式已是前后端分离开发，前端只需要向后端请求数据即可。那路由这块就可能需要前端来做，这时就有了前端路由与后端路由之分。这里只说angular 的路由。

Angular 单页面应用开发，由于所有的内容都在一个页面上，想跳转不同的页面，就需要使用网址的哈希（即 # 号）来做处理，即控制哪一部分内容在单页面上显示，从而达到看起来是多页面的目的。

二、路由的基本用法

首先，明白路由要写在什么地方？

一般情况下，为了方便管理 我们都单独起一个路由文件（如文件名：app.routes.ts）。当然也可以写在模块里面，不过不建议这样做。

那这个文件如何写呢？

// app.routes.ts
// 引入路由模块
import { RouterModule } from '@angular/router';
// 引入 home 组件
import {HomeComponent} from './home/home.component';
// 引入 jokes 组件
import {JokesComponent} from './jokes/jokes.component';

export const appRoutes=[
    {
        path:'',    // 路由为空
        redirectTo:'home',    // 重定向到 home 
        pathMatch:'full'    // 全匹配
    },
    {
        path:'home',    // home 路由地址
        component:HomeComponent    // home 地址对应的组件。页面显示该组件对应的html模板内容
    },
    {
        path:'jokes',
        component:JokesComponent
    },
    {
        path:'**',    // 输入不存在的路由
        component:HomeComponent    // 跳转 home 组件，即页面显示home组件的html模板内容
    }
];

可以看出来，路由基本是对应着组件来的，组件里面有 html 模板。即一个路由指向一个组件，一个组件指向一个模板，从而实现不同页面对应不同路由。

创建了路由文件，要让其工作起来，也就是能用，这里还需要做其他的事情。

首先，要导入到组件对应的模块中去，我这里对应着 app.module.ts 该模块，那我就需要把路由文件导入进去。

看一下引入路由之后的模块：

// app.module.ts
import { NgModule } from '@angular/core';
// 1、引入 路由 模块 RouterModule
import { RouterModule } from '@angular/router';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
// 2、引入我们创建的路