毕竟 三大框架的都可以 做单页应用的
vue 和 react 的路由 讲解 我之前很早就说过了 今天终于暂时迎来了 路由的终结篇章了 angular的路由讲解了

其实把 你有了 vue和 react 的路由基础的话 理解ng 的路由还是 比较容易 说到底底层都是js 虽然 ng是 ts写的 但是换汤不换药

好了 进入正题了

路由要讲的 无非就是 路由的 1.引入2.跳转3.跳转带参数4.接受参数5.动态路由 这几个核心问题

1.先说引入吧

安装脚手架的时候 他会问你 是否要安装路由 说时候有一些项目确实用不到路由的这个东西
其实我还是比较喜欢react中 redux作者的一句话 当你不知道是否要使用redux的时候 可以确定 你用不着redux了 哈哈 这句话挺有意思的 大佬们说话就是有意思哈

好了 言归正传了
创建好的脚手架 文件下面有一个 app-routing.module.ts的文件

路由模块都已经帮我们引入好了 但是组件的注册还是得我们自己来做

路由中要用到的组件 引入到 app-routing.module.ts 文件中
说个小技巧 可以去 app.module.ts中 复制粘贴拿过来
因为 这两个文件是同一个目录下 且组件 要使用 必须提前注册再 app.module.ts中
你用 ng g component + 自己的组件名 他就会自动注册到 app,module.ts中

import { HomeComponent } from './components/home/home.component';

然后写到一个 routes的数组中 这个和vue 很像
注意 不同的是 前面不用加斜线 / 哈
如果没有 匹配到的话 可以使用 下面的方式重定向到home路由下
{
path:’**’,redirectTo:‘home’
}

//  路由前面不要加 斜线
const routes: Routes = [{path:'home',component:HomeComponent,   // 首页路由配置}, {path:'**',redirectTo:'home'}
];

然后就是 app.component.html 中有一个 算是 路由渲染的组件把
一般的话 当你安装带有路由的 脚手架的时候 它是自动会有
但是有些人 会一上来 就把这个文件给清空了 所以哈 你清空的话 记得手动加上来
是不是又想起来了什么的
是不是和vue 又很像了 这其实不奇怪的呢 毕竟咱的 尤大神 就是从谷歌出来的

<router-view ></router-view> 

这个时候 再地址上加上 /home 应该是就可以渲染了 home组件了

如果要注册 路由 就和上面添加 home 一样了 不停的 往里面注册了 当然 如果组件很多的话 后期就又要牵扯到 模块化管理 后面 我会再写博客 进行讲解的

2. 路由的跳转

方式 和 vue 一样有两种 一种是 a标签 跳转 一种是 通过js 进行跳转

2.1 a标签跳转 这里可是要加上 斜线的哦 记住

// 动态改变的路由写法<a [routerLink]="[‘/name']" routerLinkActive="active">跳转首页</a>// 静态的情况<a routerLink="home" routerLinkActive="active">跳转首页</a>

routerLinkActive 后面 的 active 是一个可以让你描述 当前路由被命中之后 a标签的样式 类 你可以自己设置

设计 选中 之后 a标签的 颜色字体是 红色

a.active{color: red;
}

2. 通过js的方式 进行跳转 又叫做编程式导航

在页面中 设计一个按钮绑定一个单击事件

<button (click)="goHome()">登陆</button>

再ts文件中 要引入一个 模块了
import { Router } from “@angular/router”;

import { Router } from "@angular/router"; // 引入路由模块
constructor(public router:Router) { }   // 赋值给 一个 router 属性
goHome(){this.router.navigate(['/home'])
}

3. 跳转传参

其实把 在工作中 这个传参的 似乎决定的你得业务能不能成功运转了，是连接各个页面的纽带东西

传参也是有两种方式 一个 就是 用 ? 问号的形式 拼接到地址栏上面 另一种就是使用 resultful 规则 home/11 这种方式 也和后面要说的动态路由有关

3.1 先说 get方式把
3.1.1 a标签的 get方式

<a [routerLink]="['/home']" [queryParams]="{name:"zhaoyunchong"}" routerLinkActive="router-link-active" >  </a>

3.1.2 js的get方式跳转

import { Router,NavigationExtras } from "@angular/router";
// 其实把 NavigationExtras 这个不写也行 但是写了更标准些  看自己的习惯了
goHome(){let queryParams:NavigationExtras={queryParams:{name:"zhaoyunchong"}}this.router.navigate(['/home'],queryParams)}

字数对于一篇文档有点多 我改成两篇了 请移步下一篇

关注我持续更新前端知识