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 相关文章推荐
Javascript中的数学函数
Apr 04 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
js形成页面的一种遮罩效果实例代码
Jan 04 Javascript
JavaScript中获取鼠标位置相关属性总结
Oct 11 Javascript
推荐10个2014年最佳的jQuery视频插件
Nov 12 Javascript
js对象继承之原型链继承实例
Jan 10 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
jquery实现的点击翻书效果代码
Nov 04 Javascript
JS加载器如何动态加载外部js文件
May 26 Javascript
laydate只显示时分 不显示秒的功能实现方法
Sep 28 Javascript
Vue Router的手写实现方法实现
Mar 02 Javascript
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 保留字列表
2012/10/04 PHP
php中生成随机密码的自定义函数代码
2013/10/21 PHP
javascript 动态加载 css 方法总结
2009/07/11 Javascript
让checkbox不选中即将选中的checkbox不选中
2014/07/11 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
基于es6三点运算符的使用方法(实例讲解)
2017/10/12 Javascript
Vue官网todoMVC示例代码
2018/01/29 Javascript
Nodejs下使用gm圆形裁剪并合成图片的示例
2018/02/22 NodeJs
Vue.js上传图片到阿里云OSS存储的方法示例
2018/12/13 Javascript
JS基于开关思想实现的数组去重功能【案例】
2019/02/18 Javascript
24行JavaScript代码实现Redux的方法实例
2019/11/17 Javascript
vue根据条件不同显示不同按钮的操作
2020/08/04 Javascript
可用于监控 mysql Master Slave 状态的python代码
2013/02/10 Python
从零学python系列之从文件读取和保存数据
2014/05/23 Python
Python用模块pytz来转换时区
2016/08/19 Python
发布你的Python模块详解
2016/09/15 Python
Python文本相似性计算之编辑距离详解
2016/11/28 Python
Python执行时间的计算方法小结
2017/03/17 Python
python中学习K-Means和图片压缩
2017/11/20 Python
Python Paramiko模块的使用实际案例
2018/02/01 Python
Python中的defaultdict与__missing__()使用介绍
2018/02/03 Python
Windows下PyCharm安装图文教程
2018/08/27 Python
关于python之字典的嵌套,递归调用方法
2019/01/21 Python
python多线程并发让两个LED同时亮的方法
2019/02/18 Python
python用match()函数爬数据方法详解
2019/07/23 Python
python爬虫库scrapy简单使用实例详解
2020/02/10 Python
Python pandas对excel的操作实现示例
2020/07/21 Python
CSS3的first-child选择器实战攻略
2016/04/28 HTML / CSS
深入理解HTML5定时器requestAnimationFrame的使用
2018/12/12 HTML / CSS
Microsoft新加坡官方网站:购买微软最新软件和技术产品
2016/10/28 全球购物
中学生团员自我评价分享
2013/12/07 职场文书
初中地理教学反思
2014/01/11 职场文书
喝酒驾驶检讨书
2014/10/01 职场文书
群众路线专项整治方案
2014/10/27 职场文书
仓库保管员岗位职责
2015/02/09 职场文书
给校长的建议书作文300字
2015/09/14 职场文书