navigate
一、router.navigate的使用
navigate是Router类的一个方法,主要用来跳转路由。
函数定义:
1
|
navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>` |
1
2
3
4
5
6
7
8
9
|
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
1
|
< button (click)="toDetail()">detail</ button > |
1
2
3
|
toDetail() { this ._router.navigate([ '/detail' ]); } |
解决方法:
1.添加type
1
|
< button type = "button" (click)="toDetail()">detail</ button > |
2.click添加false
1
|
< button (click)="toDetail();false">detail</ button > |
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家学习或者使用Angular.js能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
navigate的更多相关文章
- (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKind.Relative));
(App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKi ...
- window.navigate 与 window.location.href 的使用区别介绍
window.navigate(sURL)方法是针对IE的,不适用于FF,在HTML DOM Window Object中,根本没有列出window.navigate方法. 要在javascript中 ...
- 在wp中,使用NavigationService.Navigate导航页面出现错误
我们在WP项目中采用页面导航时候,经常会使用以下代码 NavigationService.Navigate(new Uri("/Page1.xaml",UriKind.Relati ...
- angular 的navigate 各种使用情况
navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise ...
- Angular4中路由Router类的跳转navigate
最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...
- ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)
页面跳转时,报 Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组 ...
- 在webBrowser1.Navigate(url)中设置Cookie的注意点
[DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] public static exte ...
- react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法
一.方法简介 1. 应用中的每个页面组件都会自动提供 this.props.navigation this.props.navigation可以获取的一些方法: navigate - 转到另一个页面, ...
- driver.get()和driver.navigate().to()到底有什么不同?-----Selenium快速入门(四)
大家都知道,这两个方法都是跳转到指定的url地址,那么这两个方法有什么不同呢?遇到这种情况,第一反应就是查查官方的文档. 官方文档的说法是:Load a new web page in the cur ...
- angular2 Router类中的路由跳转navigate
navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...
随机推荐
- 研究人员发现绝大部分酷派(Coolpad)手机暗藏后门(转)
隐私问题被曝光得越来越多,随着物联网的发展,只会变得越来越严重,不过从当前看来 ,国人对隐私的重视度还远没有国外,期待加强对隐私的保护策略. 转自:http://www.freebuf.com/n ...
- NHibernate官方文档中文版——批量插入(Batch inserts)
A naive approach t7o inserting 100 000 rows in the database using NHibernate might look like this: 一 ...
- Xcode no visible @interface for XXX declares
出现如上面的错误, 是因为没有找到这个方法, 要自己写一个这样的方法 , 如果这是个类目的方法的话, 需要在Target->Linking->Other Linker Flags中添加- ...
- InternalError: (pymysql.err.InternalError) (1205, u'Lock wait timeout exceeded; try restarting transaction')
在mysql innodb中使用事务,如果插入或者更新出错,一定要主动显式地执行rollback,否则可能产生不必要的锁而锁住其他的操作 我们在使用数据库的时候,可以使用contextlib,这样异常 ...
- iOS:导航条滚动透明度随着tableView的滚动而变化
来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如 ...
- C# 中的单精度与双精度区别
单精度浮点数(float)与双精度浮点数(double)的区别: (1)在内存中占有的字节数不同 * 单精度浮点数在机内占4个字节 *双精度浮点数在机内占8个字节 (2)有效数字位数不同 *单精度浮点 ...
- Scriptable render pipeline unity
https://www.youtube.com/watch?v=zbjkEQMEShM LWRP https://blogs.unity3d.com/cn/2018/02/21/the-lightwe ...
- Spring Security实现后台管理员登录(一)
一.实现功能 二.数据表设计 为了测试方便,这里创建一个简单的数据表,只含有name和password两个字段.至于角色,权限等,这里都先不考虑. 插入一条数据,name为admin,password ...
- NDK下vfork+execl启动程序
pid_t _pid = vfork(); if (_pid == 0) {//child process LOGV("[ContextSharing]in child process.&q ...
- (转)如何在maven环境中设置JVM参数
有时候我们需要设定maven环境下的JVM参数,以便通过maven执行的命令或启动的系统能得到它们需要的参数设定.比如:当我们使用jetty:run启动jetty服务器时,在进行热部署时会经常发生:J ...