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 相关文章推荐
ExtJS Window 最小化的一种方法
Nov 18 Javascript
JQuery模板插件 jquery.tmpl 动态ajax扩展
Nov 10 Javascript
javascript 函数声明与函数表达式的区别介绍
Oct 05 Javascript
jQuery实现折线图的方法
Feb 28 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
JS Array.slice 截取数组的实现方法
Jan 02 Javascript
javascript比较语义化版本号的实现代码
Sep 09 Javascript
js实现带进度条提示的多视频上传功能
Dec 13 Javascript
JavaScript使用Ajax上传文件的示例代码
Aug 10 Javascript
在vue中使用Autoprefixed的方法
Jul 27 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
vue axios封装httpjs,接口公用配置拦截操作
Aug 11 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实现的四则运算表达式计算实现代码
2011/08/02 PHP
CodeIgniter框架URL路由总结
2014/09/03 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
javascript小组件 原生table排序表格脚本(兼容ie firefox opera chrome)
2012/07/25 Javascript
javascript简单实现命名空间效果
2014/03/06 Javascript
jQuery简单tab切换效果实现方法
2015/04/08 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
2015/06/23 Javascript
javascript实现任务栏消息提示的简单实例
2016/05/31 Javascript
基于Angular.js实现的触摸滑动动画实例代码
2017/02/19 Javascript
Vue.js实现文章评论和回复评论功能
2020/05/30 Javascript
关于使用js算总价的问题
2017/06/23 Javascript
vue+element-ui集成随机验证码+用户名+密码的form表单验证功能
2018/08/05 Javascript
vue给组件传递不同的值方法
2018/09/29 Javascript
vue-cli3添加模式配置多环境变量的方法
2019/06/05 Javascript
JavaScript实现单点登录的示例
2020/09/23 Javascript
python常用知识梳理(必看篇)
2017/03/23 Python
python使用KNN算法手写体识别
2018/02/01 Python
Python使用爬虫抓取美女图片并保存到本地的方法【测试可用】
2018/08/30 Python
解决python给列表里添加字典时被最后一个覆盖的问题
2019/01/21 Python
送给程序员的20个Java集合面试问题
2014/08/06 面试题
优秀求职自荐信怎样写
2013/12/18 职场文书
给男朋友的道歉信
2014/01/12 职场文书
监察建议书格式
2014/05/19 职场文书
应届生找工作求职信
2014/06/24 职场文书
干部个人对照检查材料
2014/08/25 职场文书
学生顶撞老师的检讨书
2014/09/17 职场文书
财产分割协议书范本
2014/11/03 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
JavaScript实现复选框全选功能
2021/04/11 Javascript
python面向对象版学生信息管理系统
2021/06/24 Python
SpringCloud之@FeignClient()注解的使用方式
2021/09/25 Java/Android
Nginx如何限制IP访问只允许特定域名访问
2022/07/23 Servers
xhunter1.sys可以删除嘛? win11提示xhunter1.sys驱动不兼容解决办法
2022/09/23 数码科技