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


Posted in Javascript onMay 07, 2017

本文主要介绍的是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能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
ModelDialog JavaScript模态对话框类代码
Apr 17 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
AngularJS ng-app 指令实例详解
Jul 30 Javascript
JavaScript的兼容性与调试技巧
Nov 22 Javascript
jsTree使用记录实例
Dec 01 Javascript
form表单序列化详解(推荐)
Aug 15 Javascript
vue-router 导航钩子的具体使用方法
Aug 31 Javascript
Vue项目组件化工程开发实践方案
Jan 09 Javascript
js实时监控文本框输入字数的实例代码
Jan 18 Javascript
详解React之父子组件传递和其它一些要点
Jun 25 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
vue3.0自定义指令(drectives)知识点总结
Dec 27 Vue.js
Angular2中select用法之设置默认值与事件详解
May 07 #Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 #Javascript
Angular.Js中ng-include指令的使用与实现
May 07 #Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 #Javascript
JavaScript的继承实现小结
May 07 #Javascript
vue2.0多条件搜索组件使用详解
Mar 26 #Javascript
Vue 进阶教程之v-model详解
May 06 #Javascript
You might like
php缩放gif和png图透明背景变成黑色的解决方法
2014/10/14 PHP
xmlHTTP实例
2006/10/24 Javascript
js如何判断用户是在PC端和还是移动端访问
2014/04/24 Javascript
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
jquery实现的省市区三级联动
2015/04/02 Javascript
JS+CSS实现带有碰撞缓冲效果的竖向导航条代码
2015/09/15 Javascript
纯javascript移动优先的幻灯片效果
2015/11/02 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JS中用childNodes获取子元素换行会产生一个子元素
2016/12/08 Javascript
根据Bootstrap Paginator改写的js分页插件
2016/12/25 Javascript
详解javascript表单的Ajax提交插件的使用
2016/12/29 Javascript
原生js实现商品放大镜效果
2017/01/12 Javascript
用nodejs实现json和jsonp服务的方法
2017/08/25 NodeJs
微信小程序实现多宫格抽奖活动
2020/04/15 Javascript
Vue实现点击当前元素以外的地方隐藏当前元素(实现思路)
2019/12/04 Javascript
Windows系统配置python脚本开机启动的3种方法分享
2015/03/10 Python
python使用装饰器和线程限制函数执行时间的方法
2015/04/18 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python数据结构之栈、队列的实现代码分享
2017/12/04 Python
pip matplotlib报错equired packages can not be built解决
2018/01/06 Python
pycharm+django创建一个搜索网页实例代码
2018/01/24 Python
python中K-means算法基础知识点
2021/01/25 Python
快速一键生成Python爬虫请求头
2021/03/04 Python
HTML5中使用postMessage实现Ajax跨域请求的方法
2016/04/19 HTML / CSS
介绍一下JNDI的基本概念
2013/07/26 面试题
小学教师自我鉴定范文
2014/03/20 职场文书
代办出身证明书
2014/10/21 职场文书
工作期间打牌检讨书范文
2014/11/20 职场文书
社区敬老月活动总结
2015/05/07 职场文书
小学班主任心得体会
2016/01/07 职场文书
合作协议书格式范本
2016/03/21 职场文书
2019企业给员工的慰问信
2019/06/24 职场文书
Python合并多张图片成PDF
2021/06/09 Python
教你修复 Win11应用商店加载空白问题
2021/12/06 数码科技
Pytorch中使用ImageFolder读取数据集时忽略特定文件
2022/03/23 Python
Python 图片添加美颜效果
2022/04/28 Python