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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
jQuery.getScript加载同域JS的代码
Feb 13 Javascript
通过js简单实现将一个文本内容转译成加密文本
Oct 22 Javascript
利用jQuary实现文字浮动提示效果示例代码
Dec 26 Javascript
JavaScript避免代码的重复执行经验技巧分享
Apr 17 Javascript
JS实现点击登录弹出窗口同时背景色渐变动画效果
Mar 25 Javascript
Knockoutjs 学习系列(二)花式捆绑
Jun 07 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
Vue.js组件tab实现选项卡切换
Mar 23 Javascript
对象不支持indexOf属性或方法的解决方法(必看)
May 28 Javascript
一文读懂vue动态属性数据绑定(v-bind指令)
Jul 20 Javascript
Vue双向数据绑定(MVVM)的原理
Oct 03 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安全配置方法
2007/06/16 PHP
PHP+ajax 无刷新删除数据
2010/02/20 PHP
初品cakephp 入门基础
2012/02/16 PHP
浅析HTTP消息头网页缓存控制以及header常用指令介绍
2013/06/28 PHP
PHP记录搜索引擎蜘蛛访问网站足迹的方法
2015/04/15 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
PHP7原生MySQL数据库操作实现代码
2020/07/03 PHP
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
详解强大的jQuery选择器之基本选择器、层次选择器
2012/02/07 Javascript
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js操作模态窗口及父子窗口间相互传值示例
2014/06/09 Javascript
javascript实现获取浏览器版本、操作系统类型
2015/01/29 Javascript
Bootstrap表单Form全面解析
2016/06/13 Javascript
手机浏览器 后退按钮强制刷新页面方法总结
2016/10/09 Javascript
详解使用vue脚手架工具搭建vue-webpack项目
2017/05/10 Javascript
Vue开发之watch监听数组、对象、变量操作分析
2019/04/25 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
nuxt.js服务端渲染中axios和proxy代理的配置操作
2020/11/06 Javascript
[01:30:55]VG vs Mineski Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
[01:22:29]真视界:2019年国际邀请赛总决赛
2020/01/29 DOTA
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python保存网页图片到本地的方法
2018/07/24 Python
Python实现的批量修改文件后缀名操作示例
2018/12/07 Python
python3 实现爬取TOP500的音乐信息并存储到mongoDB数据库中
2019/08/24 Python
Python搭建代理IP池实现接口设置与整体调度
2019/10/27 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
PyCharm Ctrl+Shift+F 失灵的简单有效解决操作
2021/01/15 Python
纯CSS3打造属于自己的“小黄人”
2016/03/14 HTML / CSS
GoPro摄像机美国官网:美国运动相机厂商
2018/07/03 全球购物
工程售后服务方案
2014/06/08 职场文书
文案策划专业自荐信
2014/07/07 职场文书
手机被没收的检讨书
2014/10/04 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
道歉的话语大全
2015/05/12 职场文书
Ajax请求超时与网络异常处理图文详解
2021/05/23 Javascript
使用Docker容器部署rocketmq单机的全过程
2022/04/03 Servers