Angular 入门教程系列：30：设置页面路由

最新推荐文章于 2024-05-08 09:50:52 发布

淼叔

最新推荐文章于 2024-05-08 09:50:52 发布

阅读量4.2k

点赞数

分类专栏： # 前端 # Angular快速入门

本文链接：https://blog.csdn.net/liumiaocn/article/details/81394939

版权

Angular快速入门同时被 2 个专栏收录

65 篇文章 50 订阅

订阅专栏

前端

43 篇文章 5 订阅

订阅专栏

上篇文章搭建了一个页面的框架，这篇文章中将会添加路由，使得页面可以通过路由来进行控制。

Routes 和 RouterModule

路由有很多用法，最基础的是使用routes和RouterModule进行结合。先看一下如下简单的代码所能实现的功能

路由信息

在app.module.ts中添加如下一段路由信息，用于显示页面的跳转信息，因为目前只有一个页面，所以非常简单

const routes: Routes = [
  {
    path: 'layout',
    component: DefaultLayoutComponent
  },
  {
    path: '',
    component: DefaultLayoutComponent
  },
  {
    path: '**',
    component: DefaultLayoutComponent
  },
];

路由主要是将组件和用于跳转的url进行mapping

参数	说明
path	用于指示组件跳转的url
component	实现具体功能的组件
data	用于传递路由相关的信息，一般保存诸如标题之类的静态信息

path在使用时有以下常见方式和注意事项

注意事项	说明
事项1	path不能以/开头
事项2	”为空路径，空路径表示url为空时的路由跳转
事项3	**为通配符，用于控制url和路由信息都不匹配时的做法，一般会跳到定制的404页面组件上
事项4	可以在path中使用诸如user/:id的方式进行id的数据传递

RouterModule.forRoot

在import中添加RouterModule.forRoot(routes)

forRoot声明：
static forRoot(routes: Routes, config?: ExtraOptions): ModuleWithProviders<RouterModule>;

参数	参数说明
routes	包含路由信息的Routes类型的变量
config	可选参数，可用来配置额外有用的信息，比如{ enableTracing: true }用来在开发环境设定路由信息的输出

router-outlet

router-outlet用于表示根据路由信息，在指定位置添加要加载进来的页面组件信息，比如这里我们是想将整个DefaultLayoutComponent页面组件加载进来，最简单的方式是直接在app.component.html中将添加其选择器即可

liumiaocn:app liumiao$ cat app.component.html 
<router-outlet></router-outlet>
liumiaocn:app liumiao$

因为AppComponent本身也是一个组件，在框架中被自动生成的代码组到index.html里面了，所以整个关系是：index.html -> app-root -> router-outlet -> DefaultLayoutComponent

liumiaocn:src liumiao$ cat index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Ng6demo</title>
  <base href="/">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <app-root></app-root>
</body>
</html>
liumiaocn:src liumiao$