angular2 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路由不会进行跳转
angular2 Router类中的路由跳转navigate的更多相关文章
- vue中通过路由跳转的三种方式
原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...
- 如何在Vue项目中给路由跳转加上进度条
1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...
- flutter中的路由跳转
在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...
- React native路由跳转navigate、push、replace的区别
由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...
- vue 如何实现在函数中触发路由跳转
this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...
- vue中的路由的跳转的参数
vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...
- angular中路由跳转并传值四种方式
一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...
- vue中的路由
路由配置项: import Router from ‘vue-router’ 1.path:路径 ...
- vue如何在路由跳转的时候更新组件
项目中在路由跳转的时候碰到一个问题,没有更新视图,如何解决呢: https://segmentfault.com/a/1190000008879966 http://www.tuicool.com/a ...
随机推荐
- 从零开始学JAVA(07)-使用SpringMVC4写helloworld
一.关于开发环境 Eclipse IDE for Java EE Developers Jdk 1.7 (32位版本) SpringMVC 4.1.5.RELEASE apache-tomcat-7. ...
- php访问mysql数据库的步骤
官方说5.5开始就废弃mysql_query()这块东西很多,当然常用的就几个还是看手册吧. 这里简单记录一下.在我失忆之后可以找回一点记忆.最近一直用框架原生的都快忘了. 1.打开mysql连接 $ ...
- ssm集成redis
身在一个传统的IT公司,接触的新技术比较少,打算年后跳槽,所以抽空学了一下redis. 简单的redis测试,咱们这边就不讲了,现在主要讲讲ssm集成redis的过程,因为现在项目用的就是ssm的框架 ...
- vmware创建centos虚拟机
下载centos 安装之前你需要下载centos镜像:http://mirrors.aliyun.com/ 创建虚拟机 如果还没有安装vmware请参考:https://www.cnblogs.com ...
- HDU 1757 矩阵求第n的递推式
A Simple Math Problem Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Ot ...
- 第三天-基本数据类型 int bool str
# python基础数据类型 # 1. int 整数 # 2.str 字符串.不会用字符串保存大量的数据 # 3.bool 布尔值. True, False # 4.list 列表(重点) 存放大量的 ...
- Bzoj4766: 文艺计算姬(Matrix-tree/prufer)
BZOJ 答案就是 \(n^{m-1}m^{n-1}\) \(prufer\) 证明: \(n\) 中的数字出现 \(m-1\) 次,\(m\) 中出现 \(n-1\) 次,根据 \(prufer\) ...
- HDU P2222 Keywords Search
In the modern time, Search engine came into the life of everybody like Google, Baidu, etc.Wiskey als ...
- Docker 核心概念、安装、端口映射及常用操作命令,详细到令人发指。
Docker简介 Docker是开源应用容器引擎,轻量级容器技术. 基于Go语言,并遵循Apache2.0协议开源 Docker可以让开发者打包他们的应用以及依赖包到一个轻量级.可移植的容器中,然后发 ...
- 30分钟掌握ES6/ES2015核心内容[上和下], 不错的说
ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015. 也就是说,ES6就是ES2015. ...