场景

Angular介绍、安装Angular Cli、创建Angular项目入门教程：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105570017

Angular新建组件以及组件之间的调用：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/105694997

通过以上搭建起Angular项目。

Angular中的路由配置、路由重定向、默认选中路由：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106182994

注：

博客：
https://blog.csdn.net/badao_liumang_qizhi
关注公众号
霸道的程序猿
获取编程相关电子书、教程推送与免费下载。

实现

除了在超链接中进行路由跳转，有时还需要在js中控制进行路由的跳转

JS控制路由跳转

首先在app.routing.module.ts中引入要跳转的组件并配置要跳转的路由

const routes: Routes = [{path:'parent',component:ParentComponent}
];

然后在页面中添加一个button并添加点击事件

<button (click)="goParent()">跳转</button>

然后在ts中需要引入Router

import {Router} from '@angular/router';

并进行声明

constructor(private router:Router) { }

然后在对应的方法中

  goParent(){this.router.navigate(['/parent']);}

效果

JS控制动态路由

Angular中实现动态路由跳转并传递参数：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106203529

动态路由的配置同上面一样

在页面新建按钮并设置点击事件

<button (click)="goDetails()">动态路由跳转</button>

然后在app.routing.module.ts中引入要跳转的组件并配置动态路由

const routes: Routes = [{path:'newsdetail/:id',component:NewsdetailComponent}];

在点击事件中

  goDetails(){this.router.navigate(['/newsdetail/','123']);}

效果

JS控制路由get传值跳转

Angular中实现路由跳转并通过get方式传递参数：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/106203220

配置get传值方式同上。

在页面新建按钮并设置点击事件

<button (click)="goDetails2()">get路由跳转</button>

除了需要引入Router外还要引入NavigationExtras

import {Router,NavigationExtras} from '@angular/router';

然后在app.routing.module.ts中引入要跳转的组件并配置路由

const routes: Routes = [{path:'newsdetail',component:NewsdetailComponent}
];

在点击事件中

  goDetails2(){let navigationExtras: NavigationExtras = {queryParams: { 'session_id': '123' },fragment: 'anchor'};this.router.navigate(['/newsdetail'],navigationExtras);}

效果

Angular中使用JS实现路由跳转、动态路由传值、get方式传值相关推荐

js实现页面跳转重定向的几种方式
转载自 js实现页面跳转重定向的几种方式这篇文章主要介绍js实现页面跳转重定向的几种方式,需要的朋友可以参考下第一种: <script language="javascript& ...
什么是动态路由如何使用动态路由
文章目录什么是动态路由和概述动态路由特点动态路由如何实现动态路由协议选择依据:度量值收敛动态路由协议分类什么是RIP RIP的基本概念路由表的形成 RIP的度量值与更新时间 RIP协 ...
vue路由重定向和动态路由
vue路由重定向和动态路由文章目录 vue路由重定向和动态路由 vue路由重定向动态路由 vue路由重定向实现页面跳转一般有两种方式:重定向页面和转发页面. 重定向页面的具体实现方式就是更改页面 ...
实战：将静态路由发布到动态路由
将静态路由发布到动态路由打开随书光盘中第6章练习"06 将静态路由发布到动态路由.pkt",如图6-22所示,河北师大和软件学院有各自独立的网络,有独立的IT部门管理自己的网络. ...
【计算机网络】网络层 : 路由算法 ( 路由算法分类 | 静态路由算法 | 动态路由算法 | 全局性动态路由算法 | 分散性动态路由算法 | 分层次路由选择协议 )
文章目录一.路由算法二.路由算法分类三.静态路由算法四.动态路由算法五.动态路由算法分类六.分层次的路由选择协议一.路由算法路由算法 : 选择数传输的 "最佳路由&quo ...
华为路由器静态路由和ospf动态路由配置
一直想成为一名合格的运维工作人员,把自己学到的知识和体会写在这里,既能分享给志同道合的人,也是日记和复习. 一.路由器的基本信息路由器工作在网络层,在OSI七层模型里面属于三层设备,主要的协议就是I ...
几个经常用到的angular路由Router、ActivatedRoute 知识点：嵌套路由、路由跳转、路由传参、路由参数获取
深度玩家可移步Angular - 常见路由任务 1.嵌套路由 const routes: Routes = [{path: 'first',component: FirstComponent,//同步 ...
vue——路由之路由跳转、路由传参、路由嵌套、路由模式
相关认识: 后端路由:对于前端的网络请求,不同的pathname,去执行后端的不同业务前端路由:不同的网址对应各自的页面 vue的前端路由:SPA应用要做出路由效果,就得判断当前网址,然后切换组件 ...
vue 函数路由跳转_vue路由的钩子函数和跳转
首页可以控制导航跳转,beforeEach,afterEach等,一般用于页面title的修改.一些需要登录才能调整页面的重定向功能. beforeEach主要有3个参数to,from,next. t ...

Angular中使用JS实现路由跳转、动态路由传值、get方式传值

场景

实现

JS控制路由跳转

效果

JS控制动态路由

效果

JS控制路由get传值跳转

效果

Angular中使用JS实现路由跳转、动态路由传值、get方式传值相关推荐

最新文章

热门文章