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 简单高效判断数据类型 系列函数 By shawl.qiu
Mar 06 Javascript
javascript 设计模式之单体模式 面向对象学习基础
Apr 18 Javascript
EXT窗口Window及对话框MessageBox
Jan 27 Javascript
IE、FF、Chrome浏览器中的JS差异介绍
Aug 13 Javascript
微信小程序 火车票查询实例讲解
Oct 17 Javascript
第一次记录Bootstrap table学习笔记(1)
May 18 Javascript
Angular2 之 路由与导航详细介绍
May 26 Javascript
node.js 核心http模块,起一个服务器,返回一个页面的实例
Sep 11 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
ant-design-vue 快速避坑指南(推荐)
Jan 21 Javascript
Vue项目中数据的深度监听或对象属性的监听实例
Jul 17 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
TMDPHP 模板引擎使用教程
2012/03/13 PHP
ThinkPHP防止重复提交表单的方法实例分析
2018/05/10 PHP
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
2013/11/30 Javascript
js实现仿爱微网两级导航菜单效果代码
2015/08/31 Javascript
javascript从定义到执行 你不知道的那些事
2016/01/04 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
使用jQuery Ajax 请求webservice来实现更简练的Ajax
2016/08/04 Javascript
使用jQuery和ajax代替iframe的方法(详解)
2017/04/12 jQuery
元素全屏的设置与监听实例
2017/11/28 Javascript
nodejs微信扫码支付功能实现
2018/02/17 NodeJs
vue2.0学习之axios的封装与vuex介绍
2018/05/28 Javascript
vuex的module模块用法示例
2018/11/12 Javascript
详解vue中的computed的this指向问题
2018/12/05 Javascript
用node撸一个监测复联4开售短信提醒的实现代码
2019/04/10 Javascript
vue.js路由mode配置之去掉url上默认的#方法
2019/11/01 Javascript
[01:10:27]DOTA2-DPC中国联赛正赛 SAG vs XG BO3 第二场 3月5日
2021/03/11 DOTA
通过mod_python配置运行在Apache上的Django框架
2015/07/22 Python
浅谈Python对内存的使用(深浅拷贝)
2018/01/17 Python
详解python 注释、变量、类型
2018/08/10 Python
python实现图片压缩代码实例
2019/08/12 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
自定义实现 PyQt5 下拉复选框 ComboCheckBox的完整代码
2020/03/30 Python
python爬虫实例之获取动漫截图
2020/05/31 Python
Python调用C/C++的方法解析
2020/08/05 Python
OpenCV+Python3.5 简易手势识别的实现
2020/12/21 Python
浅谈CSS3动画的回调处理
2016/07/21 HTML / CSS
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
网上开商店的创业计划书
2014/01/19 职场文书
小学教师师德感言
2014/02/10 职场文书
黄河象教学反思
2014/02/10 职场文书
售后客服工作职责
2014/06/16 职场文书
乡镇干部党的群众路线教育实践活动个人对照检查材料
2014/09/24 职场文书
教师节标语大全
2014/10/07 职场文书
2015大学生入党个人自传
2015/06/26 职场文书
唱歌比赛拉拉队口号
2015/12/25 职场文书