angular 的navigate 各种使用情况
navigate是Router类的一个方法,主要用来跳转路由。
函数定义:
navigate(commands: any[], extras?: NavigationExtras) : Promise`<boolean>`
- 1
- 1
interface NavigationExtras {
relativeTo : ActivatedRoute
queryParams : Params
fragment : string
preserveQueryParams : boolean
preserveFragment : boolean
skipLocationChange : boolean
replaceUrl : boolean
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
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路由不会进行跳转
angular 的navigate 各种使用情况的更多相关文章
- angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?
1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...
- angular react vue 浏览器兼容情况汇总
一.逻辑层 框架 (1)angular Angular早在1.3版本就抛弃了对ie8的支持. (2)react React 早在0.14.x 版本就抛弃了对ie8的支持. (3)vue Vue就没打算 ...
- Angular复习笔记6-依赖注入
Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...
- Angular 富文本编辑之路的探索
作者:杨振兴Worktile 前端工程师,PingCode Wiki 产品技术负责人 PingCode Wiki 提供结构化知识库来记载信息和知识,便于团队沉淀经验.共享资源,欢迎大家注册试用 本文主 ...
- 前端MVC学习总结(二)——AngularJS验证、过滤器、指令
一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...
- 带你走近AngularJS - 基本功能介绍
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 前端MVC学习总结——AngularJS验证、过滤器
前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...
- AngularJS应用页面切换优化方案
葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...
- AngularJS - 基本功能介绍
转载自:http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html (写得很好的Angular入门,可以试试) Angula ...
随机推荐
- IPTABLES使用总结(内网模拟银行网络)
iptables中有以下三种类型的表: FILTER表,默认的表,包含以下三种内建链: INPUT链,发给本地sockets的包 FORWARD链,经由系统发送的包 OUTPUT链,本地生成并发出的包 ...
- Hadoop之运行模式
Hadoop运行模式包括:本地模式.伪分布式以及完全分布式模式. 一.本地运行模式 1.官方Grep案例 1)在hadoop-2.7.2目录下创建一个 input 文件夹 [hadoop@hadoop ...
- Java面试题之Java基础
1. JDK 和 JRE 有什么区别? JRE(JavaRuntimeEnvironment,Java运行环境),也就是Java平台.所有的Java 程序都要在JRE下才能运行.普通用户只需要运行已开 ...
- 用node+webpack+vue新建vue项目步骤
1. 安装node,命令行输入node-v命令查看是否安装成功. 2. 安装vue:npm install vue-cli -g(全局安装). 3. 在想要创建vue项目的目录下,按住shift+右键 ...
- Oracle根据时间恢复已删除提交的数据
Oracle 根据数据库的时间戳恢复已删除提交的数据 1.选择一个时间点查看表中数据是否是自己想要的数据 Select * from 表名 as of timestamp to_timestamp(‘ ...
- bind与继承 待研究
class a { f() { console.log('a') } get f2() { console.log('f2') return (this['f'] = this.f.bind(this ...
- python requests + xpath 获取分页详情页数据存入到txt文件中
直接代码,如有不懂请加群讨论# *-* coding:utf-8 *-* #import jsonimport requestsimport pytesseractimport timeimport ...
- "There is no tracking information for the current branch" 解决方法
因为新创建的分支push到远程仓库后没有与本地分支关联,下面语句可以令远程分支与本地分支关联起来 git branch --set-upstream-to=origin/release_3.1.3 r ...
- Win10系列:C#应用控件进阶7
PathGeometry 前面介绍了Path的使用方法,接下来介绍PathGeometry类.PathGeometry提供了描绘由弧线.曲线和直线组成的多个复杂图形的方法.PathGeometry的核 ...
- python输入字符串
#!/usr/bin/env python#ecoding=utf-8'''Created on 2017年11月2日题目:利用递归函数调用方式,将所输入的5个字符,以相反顺序打印出来. @autho ...