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

  1. vue中通过路由跳转的三种方式

    原文:https://blog.csdn.net/qq_40072782/article/details/82533477 router-view 实现路由内容的地方,引入组件时写到需要引入的地方需要 ...

  2. 如何在Vue项目中给路由跳转加上进度条

    1.前言 在平常浏览网页时,我们会注意到在有的网站中,当点击页面中的链接进行路由跳转时,页面顶部会有一个进度条,用来标示页面跳转的进度(如下图所示).虽然实际用处不大,但是对用户来说,有个进度条会大大 ...

  3. flutter中的路由跳转

    在前面的基本路由和命名路由中,都演示了如何进行路由跳转,并且在路由跳转以后,可以借用系统自带的按钮就行返回上一级,当然了,也可以自定义按钮返回上一级. 返回上一级 在前面的例子中,当从Home.dar ...

  4. React native路由跳转navigate、push、replace的区别

    由于没有系统的去学习RN,对路由跳转了解不多,只是跟着项目在做,抽点时间简单学习一下RN路由跳转方法区别,总结如下: 如上图,外部是一个栈容器,此时A页面在最底部,navigate到B页面,为什么此时 ...

  5. vue 如何实现在函数中触发路由跳转

    this.$router.push({path:'/index'}) 欢迎加入前端交流群交流知识&&获取视频资料:749539640 methods:{ click(){ if(dat ...

  6. vue中的路由的跳转的参数

    vue中的路由跳转传参 params 与 query this.$router.push({ name:"detail", params:{ name:'nameValue', c ...

  7. angular中路由跳转并传值四种方式

    一.路由传值 步骤1 路由传递参数 注意 一定是要传递 索引值 let key = index 这种情况是在浏览器中可以显示对应的参数 这种的是问号 localhost:8080/news?id=2& ...

  8. vue中的路由

           路由配置项:        import Router from ‘vue-router’                          1.path:路径              ...

  9. vue如何在路由跳转的时候更新组件

    项目中在路由跳转的时候碰到一个问题,没有更新视图,如何解决呢: https://segmentfault.com/a/1190000008879966 http://www.tuicool.com/a ...

随机推荐

  1. JavaScript自增、自减

    JavaScript自增.自减运算符与表达式语法 var i++; var-- 声明变量 i-- 变量名 ++ -- 自增运算符 JavaScript自增.自减运算符与表达式 JavaScript自增 ...

  2. webbrowser控件使用时的注意事项

    如果HtmlElement内的没有信息,则HtmlElement的OuterText属性值为null:OuterHtml属性值则为相应的html值 如果使用OuterText属性,使用前要判断下.

  3. 【OpenCV】邻域滤波:方框、高斯、中值、双边滤波

    原文:http://blog.csdn.net/xiaowei_cqu/article/details/7785365 邻域滤波(卷积)   邻域算子值利用给定像素周围像素的值决定此像素的最终输出.如 ...

  4. 【C#】RGB转CMYK

    由于目前印兔项目中的在线设计功能设计出来的产品颜色模式不确定,但是客户设计出来的产品需要发送到印厂的客户端去下载并且印刷,只有CMYK颜色模式的产品才能正确印刷,所以需要判断产品的颜色模式是否为CMY ...

  5. C# 中的隐式类型转换(运算时的隐式转换)和显示类型转换

    区别: 隐式转换失败编译会报错. 显示转换有可能精度丢失. 根据项目的编译设置,显示转换溢出可能会报错,如果设置溢出且未使用checked检查,运行时如果发生溢出会产出未知的计算结果. 在数字运算时, ...

  6. 初识DataGridView 表格数据控件

    DataGridView控件提供了一种强大而灵活的以表格形式显示数据的方式,用户可以使用DataGridView控件来显示少量数据的只读视图,也可以对其进行缩放以显示特大数据集的可编辑视图. 扩展Da ...

  7. PHP高级工程师面试 - 笔试题

    Part1:HTTP协议 1.状态码的含义 1xx(临时响应) 表示临时响应并需要请求者继续执行操作的状态代码. 代码 说明 100 (继续) 请求者应当继续提出请求. 服务器返回此代码表示已收到请求 ...

  8. memcache 学习笔记

    Memcached是国外社区网站LiveJournal的开发团队开发的高性能的分布式内存缓存服务器.一般的使用目的是,通过缓存数据库查询结果,减少数据库访问次数,以提高动态Web应用的速度.提高可扩展 ...

  9. 15、IO (转换流、缓冲流)

    转换流概述 * A: 转换流概述 * a: 转换流概述 * OutputStreamWriter 是字符流通向字节流的桥梁:可使用指定的字符编码表,将要写入流中的字符编码成字节 * 将字符串按照指定的 ...

  10. SpringMVC学习笔记:SpringMVC框架的执行流程

    一.MVC设计模式 二.SpringMVC框架介绍 三.SpringMVC环境搭建 四.SpringMVC框架的请求处理流程及体系结构