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 ...
随机推荐
- bug: 1.eclipse 中tomcat server 变灰色 2.build path 添加的jar不识别
1.网上百度的方案试过,没有作用. 最后删掉tomcat重新解压配置解决. 确保工程属性栏中,server正确才可加载tomcat. 猜测可能原因,tomcat在eclipse有时崩溃,一般做法是将s ...
- SimpleCalendar日历插件改版
先附上一张货真价实的效果图: 以上部分代码,为了适应我司项目的需求,原来插件源码大改(因为项目中下拉框用了select2,所以原来插件的下拉框就有问题了,在加上原来插件本身就有点问题,特别是农历 .节 ...
- 封装简单的API——微信小程序
前几天自己琢磨微信小程序的基本开发,里边用到的技术包括WebAPI,也就是方法的封装. 当然也可以用ASP.NET MVC WCF来写接口.更简单应该就是 WinForm 简单易部署. 这里用的是 2 ...
- [javaEE] Servlet中Session的使用
Session是一个域 作用范围:当前会话范围 生命周期:当程序第一次调用request.getSession()创建出客户端的session对象,30分钟没有操作认为超时,这个可以在web.xml中 ...
- 用户登录注册(安全)(常规、FB、google、paypal) 实战
/* 用户登录界面 */elseif ($action == 'login'){ if($_SESSION['user_id']) { ecs_header("Lo ...
- 用Lua控制Nginx静态文件的url访问权限
需求背景:比如我们有一个存储文件的web服务器,一般通过url可直接访问到:http://127.0.0.1/uploads/test.rar,如果我们需要限制别人的访问,可以通过添加lua脚本来控制 ...
- 【SSH网上商城项目实战18】过滤器实现购物登录功能的判断
转自:https://blog.csdn.net/eson_15/article/details/51425010 上一节我们做完了购物车的基本操作,但是有个问题是:当用户点击结算时,我们应该做一个登 ...
- NIO与Socket
一.Socket 的使用 1.单线程Socket的使用 /** * 单线程版本 * 问题描述:只能服务单个客户端 * 解决方案:多线程版本 */ public class Socket_V1 { pu ...
- Linux 重置root密码
1.首先输入:sudo passwd root(设置root密码) 2.输入当前系统的账户密码(账户:my的密码) 3.输入新的root密码,确认新 4.密码,密码更新成功 5.在提示符处输入:su按 ...
- Shellinabox安装及使用教程
本文转载自: shellinabox:一款使用 AJAX 的基于 Web 的终端模拟器 一.shellinabox简介 通常情况下,我们在访问任何远程服务器时,会使用常见的通信工具如OpenSSH和P ...