angular2中router路由跳转navigate的使用与刷新页面问题详解

本文主要介绍的是angular2中router路由跳转navigate的使用与刷新页面问题的相关内容，分享出供大家参考学习，下面来看看详细的介绍：

一、router.navigate的使用

navigate是Router类的一个方法，主要用来跳转路由。

函数定义：

navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>`

interface NavigationExtras {
 relativeTo : ActivatedRoute
 queryParams : Params
 fragment : string
 preserveQueryParams : boolean
 preserveFragment : boolean
 skipLocationChange : boolean
 replaceUrl : boolean
}

1.this.router.navigate(['user', 1]);

以根路由为起点跳转

2.this.router.navigate(['user', 1],{relativeTo: route});

默认值为根路由，设置后相对当前路由跳转，route是ActivatedRoute的实例，使用需要导入ActivatedRoute

3.this.router.navigate(['user', 1],{ queryParams: { id: 1 } });
路由中传参数 /user/1?id=1

4.this.router.navigate(['view', 1], { preserveQueryParams: true });

默认值为false，设为true，保留之前路由中的查询参数/user?id=1 to /view?id=1

5.this.router.navigate(['user', 1],{ fragment: 'top' });

路由中锚点跳转 /user/1#top

6.this.router.navigate(['/view'], { preserveFragment: true });

默认值为false，设为true，保留之前路由中的锚点/user/1#top to /view#top

7.this.router.navigate(['/user',1], { skipLocationChange: true });

默认值为false，设为true路由跳转时浏览器中的url会保持不变，但是传入的参数依然有效

8.this.router.navigate(['/user',1], { replaceUrl: true });

未设置时默认为true，设置为false路由不会进行跳转

二、router.navigate刷新页面问题

造成这个问题一般是因为我们在<form>表单中使用<button>时忘记添加type属性，在表单中，如果忘记给按钮添加属性，会默认为submit

<button (click)="toDetail()">detail</button>

toDetail() {
 this._router.navigate(['/detail']);
}

解决方法：

1.添加type

<button type="button" (click)="toDetail()">detail</button>

2.click添加false

<button (click)="toDetail();false">detail</button>

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对的支持。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题：《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

# angular2  # navigate  # router  # 刷新  # angularjs2  # 对angular4子路由&辅助路由详解  # Angular2之二级路由详解  # 详解Angular路由之路由守卫  # Angular4.x通过路由守卫进行路由重定向实现根据条件跳转到相应的页面(推荐)  # 详解Angular5路由传值方式及其相关问题  # 详解Angular路由 ng-route和ui-router的区别  # 详解AngularJS1.6版本中ui-router路由中/#!/的解决方法  # Angular 4.x 路由快速入门学习  # 详解Angular路由之子路由  # 跳转  # 设为  # 值为  # 相关内容  # 表单  # 默认为  # 的是  # 进阶  # 是因为  # 这个问题  # 感兴趣  # 来看看  # 这篇文章  # 谢谢大家  # 设置为  # 更多关于  # 解决方法  # 操作技巧  # 中传  # 器中 

相关文章： C++ static_cast和dynamic_cast区别_C++静态转换与动态类型安全转换  电影网站制作价格表,那些提供免费电影的网站，他们是怎么盈利的？  建站主机解析：虚拟主机配置与服务器选择指南  如何在建站主机中优化服务器配置？  网站制作公司哪里好做,成都网站制作公司哪家做得比较好，更正规？  如何在Tomcat中配置并部署网站项目？  专业型网站制作公司有哪些,我设计专业的，谁给推荐几个设计师兼职类的网站？  宿州网站制作公司兴策,安徽省低保查询网站？  简单实现Android验证码  已有域名能否直接搭建网站？  如何在Golang中实现微服务服务拆分_Golang微服务拆分与接口管理方法  如何通过二级域名建站提升品牌影响力？  高性能网站服务器配置指南：安全稳定与高效建站核心方案  建站之星安装后如何自定义网站颜色与字体？  如何通过智能用户系统一键生成高效建站方案？  广东专业制作网站有哪些,广东省能源集团有限公司官网？  教程网站设计制作软件,怎么创建自己的一个网站？  武汉网站制作费用多少,在武汉武昌，建面100平方左右的房子，想装暖气片，费用大概是多少啊？  如何在Windows服务器上快速搭建网站？  建站主机默认首页配置指南：核心功能与访问路径优化  如何在橙子建站上传落地页？操作指南详解  简历在线制作网站免费版,如何创建个人简历？  网站海报制作教学视频教程,有什么免费的高清可商用图片网站，用于海报设计？  C#如何序列化对象为XML XmlSerializer用法  头像制作网站在线制作软件,dw网页背景图像怎么设置？  如何选择网络建站服务器？高效建站必看指南  小程序网站制作需要准备什么资料,如何制作小程序？  免费制作海报的网站,哪位做平面的朋友告诉我用什么软件做海报比较好?ps还是cd还是ai这几个软件我都会些我是做网页的？  已有域名和空间如何快速搭建网站？  高性能网站服务器部署指南：稳定运行与安全配置优化方案  济南网站建设制作公司,室内设计网站一般都有哪些功能？  南京网站制作费用,南京远驱官方网站？  动图在线制作网站有哪些,滑动动图图集怎么做？  建站之星代理商如何保障技术支持与售后服务？  建站之星安装模板失败：服务器环境不兼容？  公司网站制作价格怎么算,公司办个官网需要多少钱？  为什么Go需要go mod文件_Go go mod文件作用说明  如何高效生成建站之星成品网站源码？  建站之星客服服务时间及联系方式如何？  如何破解联通资金短缺导致的基站建设难题？  邀请函制作网站有哪些,有没有做年会邀请函的网站啊？在线制作，模板很多的那种？  建站主机是什么？如何选择适合的建站主机？  小自动建站系统：AI智能生成+拖拽模板，多端适配一键搭建  建站主机服务器选型指南与性能优化方案解析  韩国网站服务器搭建指南：VPS选购、域名解析与DNS配置推荐  打鱼网站制作软件,波克捕鱼官方号怎么注册？  清单制作人网站有哪些,近日“兴风作浪的姑奶奶”引起很多人的关注这是什么事情？  建站之家VIP精选网站模板与SEO优化教程整合指南  ppt在线制作免费网站推荐,有什么下载免费的ppt模板网站？  建站之星如何优化SEO以实现高效排名？