一、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的更多相关文章

  1. (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKind.Relative));

    (App.Current.RootVisual as PhoneApplicationFrame).Navigate(new Uri("/MainPage.xaml", UriKi ...

  2. window.navigate 与 window.location.href 的使用区别介绍

    window.navigate(sURL)方法是针对IE的,不适用于FF,在HTML DOM Window Object中,根本没有列出window.navigate方法. 要在javascript中 ...

  3. 在wp中,使用NavigationService.Navigate导航页面出现错误

    我们在WP项目中采用页面导航时候,经常会使用以下代码 NavigationService.Navigate(new Uri("/Page1.xaml",UriKind.Relati ...

  4. angular 的navigate 各种使用情况

    navigate是Router类的一个方法,主要用来跳转路由. 函数定义: navigate(commands: any[], extras?: NavigationExtras) : Promise ...

  5. Angular4中路由Router类的跳转navigate

    最近一直在学习angular4,它确实比以前有了很大的变化和改进,好多地方也不是那么容易就能理解,好在官方的文档和例子是中文,对英文不太好的还是有很大帮助去学习. 官方地址:https://angul ...

  6. ReactNative踩坑日志——页面跳转之——Undefined is not an Object(evaluating this2.props.navigation.navigate)

    页面跳转时,报  Undefined is not an Object(evaluating this2.props.navigation.navigate) 出错原因:在一个页面组件中调用了另一个组 ...

  7. 在webBrowser1.Navigate(url)中设置Cookie的注意点

    [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] public static exte ...

  8. react-navigation 3.x版本的push、navigate、goback、pop、dispatch等常用方法

    一.方法简介 1. 应用中的每个页面组件都会自动提供 this.props.navigation this.props.navigation可以获取的一些方法: navigate - 转到另一个页面, ...

  9. driver.get()和driver.navigate().to()到底有什么不同?-----Selenium快速入门(四)

    大家都知道,这两个方法都是跳转到指定的url地址,那么这两个方法有什么不同呢?遇到这种情况,第一反应就是查查官方的文档. 官方文档的说法是:Load a new web page in the cur ...

  10. angular2 Router类中的路由跳转navigate

    navigate是Router类的一个方法,主要用来路由跳转. 函数定义 navigate(commands: any[], extras?: NavigationExtras) : Promise` ...

随机推荐

  1. 研究人员发现绝大部分酷派(Coolpad)手机暗藏后门(转)

    隐私问题被曝光得越来越多,随着物联网的发展,只会变得越来越严重,不过从当前看来 ,国人对隐私的重视度还远没有国外,期待加强对隐私的保护策略.   转自:http://www.freebuf.com/n ...

  2. NHibernate官方文档中文版——批量插入(Batch inserts)

    A naive approach t7o inserting 100 000 rows in the database using NHibernate might look like this: 一 ...

  3. Xcode no visible @interface for XXX declares

    出现如上面的错误, 是因为没有找到这个方法, 要自己写一个这样的方法 , 如果这是个类目的方法的话,  需要在Target->Linking->Other Linker Flags中添加- ...

  4. InternalError: (pymysql.err.InternalError) (1205, u'Lock wait timeout exceeded; try restarting transaction')

    在mysql innodb中使用事务,如果插入或者更新出错,一定要主动显式地执行rollback,否则可能产生不必要的锁而锁住其他的操作 我们在使用数据库的时候,可以使用contextlib,这样异常 ...

  5. iOS:导航条滚动透明度随着tableView的滚动而变化

    来源:HelloYeah 链接:http://www.jianshu.com/p/b8b70afeda81 下面这个界面有没有觉得很眼熟.打开你手里的App仔细观察,你会发现很多都有实现这个功能.比如 ...

  6. C# 中的单精度与双精度区别

    单精度浮点数(float)与双精度浮点数(double)的区别: (1)在内存中占有的字节数不同 * 单精度浮点数在机内占4个字节 *双精度浮点数在机内占8个字节 (2)有效数字位数不同 *单精度浮点 ...

  7. Scriptable render pipeline unity

    https://www.youtube.com/watch?v=zbjkEQMEShM LWRP https://blogs.unity3d.com/cn/2018/02/21/the-lightwe ...

  8. Spring Security实现后台管理员登录(一)

    一.实现功能 二.数据表设计 为了测试方便,这里创建一个简单的数据表,只含有name和password两个字段.至于角色,权限等,这里都先不考虑. 插入一条数据,name为admin,password ...

  9. NDK下vfork+execl启动程序

    pid_t _pid = vfork(); if (_pid == 0) {//child process LOGV("[ContextSharing]in child process.&q ...

  10. (转)如何在maven环境中设置JVM参数

    有时候我们需要设定maven环境下的JVM参数,以便通过maven执行的命令或启动的系统能得到它们需要的参数设定.比如:当我们使用jetty:run启动jetty服务器时,在进行热部署时会经常发生:J ...