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 相关文章推荐
获取Javscript执行函数名称的方法
Dec 22 Javascript
javascript实现div的拖动并调整大小类似qq空间个性编辑模块
Dec 12 Javascript
浅谈Javascript线程及定时机制
Jul 02 Javascript
javascript制作幻灯片(360度全景图片)
Jul 28 Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 Javascript
使用jQuery实现两个div中按钮互换位置的实例代码
Sep 21 jQuery
AngularJS集合数据遍历显示的实例
Dec 27 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
angularJs中orderBy筛选以及filter过滤数据的方法
Sep 30 Javascript
解决layer.confirm选择完之后消息框不消失的问题
Sep 16 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 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
DC动漫人物排行
2020/03/03 欧美动漫
php生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
jquery ajax提交表单数据的两种方式
2009/11/24 Javascript
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
利用js 进行输入框自动匹配字符的小例子
2013/06/29 Javascript
分享Javascript中最常用的55个经典小技巧
2013/11/29 Javascript
JQuery记住用户名和密码的具体实现
2014/04/04 Javascript
jQuery使用$.ajax进行即时验证的方法
2015/12/08 Javascript
javascript如何写热点图
2015/12/08 Javascript
JS函数的定义与调用方法推荐
2016/05/12 Javascript
js 基础篇必看(点击事件轮播图的简单实现)
2016/08/20 Javascript
js实现仿购物车加减效果
2017/03/01 Javascript
angularjs+bootstrap菜单的使用示例代码
2017/03/07 Javascript
微信小程序loading组件显示载入动画用法示例【附源码下载】
2017/12/09 Javascript
webpack多入口文件页面打包配置详解
2018/01/09 Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
2019/11/01 Javascript
[40:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Liquid vs TNC
2018/04/01 DOTA
Python中super的用法实例
2015/05/28 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python 移动图片到另外一个文件夹的实例
2019/01/10 Python
利用python-pypcap抓取带VLAN标签的数据包方法
2019/07/23 Python
Python3 xml.etree.ElementTree支持的XPath语法详解
2020/03/06 Python
解决python多线程报错:AttributeError: Can't pickle local object问题
2020/04/08 Python
Python文件时间操作步骤代码详解
2020/04/13 Python
浅谈matplotlib 绘制梯度下降求解过程
2020/07/12 Python
Grid 宫格常用布局的实现
2020/01/10 HTML / CSS
找到不普通的东西:Bonanza
2016/10/20 全球购物
英国健身专家:WIT Fitness
2021/02/09 全球购物
叙述DBMS对数据控制功能有哪些
2016/06/12 面试题
优良学风班申请材料
2014/02/13 职场文书
道德演讲稿
2014/05/21 职场文书
企业宣传工作方案
2014/06/02 职场文书
同学聚会祝酒词
2015/08/10 职场文书
2016学校先进集体事迹材料
2016/02/29 职场文书
导游词之塘栖古镇
2019/12/04 职场文书