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 各种使用情况的更多相关文章

  1. angular 图片加载失败 情况处理? 如何在ionic中加载本地图片 ?

    1.angular 图片加载失败 情况处理 在directive中定义组件,在ng-src错误时,调用err-src app.directive('errSrc',function(){ return ...

  2. angular react vue 浏览器兼容情况汇总

    一.逻辑层 框架 (1)angular Angular早在1.3版本就抛弃了对ie8的支持. (2)react React 早在0.14.x 版本就抛弃了对ie8的支持. (3)vue Vue就没打算 ...

  3. Angular复习笔记6-依赖注入

    Angular复习笔记6-依赖注入 依赖注入(DependencyInjection)是Angular实现重要功能的一种设计模式.一个大型应用的开发通常会涉及很多组件和服务,这些组件和服务之间有着错综 ...

  4. Angular 富文本编辑之路的探索

    作者:杨振兴Worktile 前端工程师,PingCode Wiki 产品技术负责人 PingCode Wiki 提供结构化知识库来记载信息和知识,便于团队沉淀经验.共享资源,欢迎大家注册试用 本文主 ...

  5. 前端MVC学习总结(二)——AngularJS验证、过滤器、指令

    一.验证 angularJS中提供了许多的验证指令,可以轻松的实现验证,只需要在表单元素上添加相应的ng属性,常见的如下所示: <input Type="text" ng-m ...

  6. 带你走近AngularJS - 基本功能介绍

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...

  7. 前端MVC学习总结——AngularJS验证、过滤器

    前端MVC学习总结--AngularJS验证.过滤器 目录 一.验证 二.过滤器 2.1.内置过滤器 2.1.1.在模板中使用过滤器 2.1.2.在脚本中调用过滤函数 2.2.自定义过滤器 三.指令( ...

  8. AngularJS应用页面切换优化方案

    葡萄城的一款尚在研发中的产品,对外名称暂定为X项目.其中使用了已经上市的Wijmo中SpreadJS产品,另外,在研发过程中整理了一些研发总结分享给大家.如本篇的在页面切换的过程中优化方案,欢迎大家跟 ...

  9. AngularJS - 基本功能介绍

    转载自:http://www.cnblogs.com/powertoolsteam/p/angularjs-introdection.html (写得很好的Angular入门,可以试试) Angula ...

随机推荐

  1. ECharts导出word 图表模糊失真

    在项目中会有这样的需求,echars生成图表导入到word中 在项目中用的插件 博主有一篇文章将的是  vue使用jquery的三方插件jquery.wordexport.js   https://b ...

  2. C# 在类中使用Timer定时器以及延时处理的方法

    我们平时在C#中要用到定时功能时,有自带定时器,一般在定时器里面写函数就行了,现在需要在类里面写了一个定时器,不和界面绑定,一开始的时候感觉没什么思路,然后看了一下界面的设计代码,有了思路,还是很简单 ...

  3. Xilinx Vivado的使用详细介绍(3):使用IP核

    ilinx Vivado的使用详细介绍(3):使用IP核 Author:zhangxianhe IP核(IP Core) Vivado中有很多IP核可以直接使用,例如数学运算(乘法器.除法器.浮点运算 ...

  4. 2019 To do List

    做好测试不是靠编程,而是靠的是严禁的作风,慎密的逻辑思维,适合的测试流程. 内心有些迷茫的时候,迷茫的是作为测试既然要学那么多编程,为什么不直接去干开发呢?学了编程,用不上,到底有什么用呢? 看了这句 ...

  5. asp.net 虹软 人脸识别 实现刷脸住宿、刷脸签到、刷脸进入等

    先看看效果图,我把demo改成自动运行了,暂时借用别人的图片: 最左侧的大图为选择上传的, 中间的小图是大图的脸, 右侧的大图是人脸文件夹中已经存在的,并且相似度较高的一张脸,也就是比对的结果. 先记 ...

  6. centos7中bash: maven: 未找到命令... 解决办法

    安装了maven,但在执行mvn -v或maven-versions时提示bash: maven: 未找到命令... 应该是环境变量出错,把MAVEN_HOME的路径换到PATH上就可以了,如下: e ...

  7. SKU : Stock Keeping Unit

    Stock Keeping Unit  is a number assigned to a product by a retail store to identify the price, produ ...

  8. BeanNameAware和BeanFactoryAware接口

    平时写代码很少去实现这两个接口,这里只是做下了解,方便读Spring源码.BeanNameAware接口作用:让Bean对Name或id有知觉 package com.example.demo.biz ...

  9. PCA和PCoA

    讲解很详细:http://blog.genesino.com/2016/10/PCA/ PCA分析一般流程: 中心化(centering, 均值中心化,或者中位数中心化),定标(scale,如果数据没 ...

  10. @RequestMapping的Ant风格URL

    Ant风格资源地址支持3中匹配符 ? 匹配文件名中一个字符. *   匹配 文件名中任意字符 **  匹配多层路径 例如 /hello/*/myspring 匹配 /hello/abc/mysprin ...