angular 路由跳转以及传参

1. 路由跳转方式一: /路由?id=‘001‘ 方式 -- queryParams 方式

 路由配置:{ path: ‘details‘, component: bookDetailsComponent }

   a.  指令跳转:

  <a [routerLink]="[‘/details‘]" [queryParams]="{id: item.id}" style="color:blue; font-size: 12px;cursor:pointer">查看详情</a>

  routerLink: 跳转的路由,数组形式,传参有两种写法: 1. 使用 [queryParams]="{id: item.id}", 2. [routerLink]="[‘/details‘, id]", 数组第一个值是            路由,第二个值是要传递的参数

  b. js 实现跳转:

  

其中 this.router 是 Router 的实例

import  { Router } from ‘@angular/router‘

constructor(private router: Router) {

}

jumpDetial(bookId: string): void {

this.router.navigate([‘/details‘], {

queryParams: {

id: bookId

}

})

}

this.router.navigate([‘user‘, 1]); 以根路由为起点跳转

this.router.navigate([‘user‘, 1],{relativeTo: route}); 默认值为根路由,设置后相对当前路由跳转,跳转到子路由

this.router.navigate([‘user‘, 1],{ queryParams: { id: 1 } }); 路由中传参数 /user/1?id=1

this.router.navigate([‘view‘, 1], { preserveQueryParams: true }); 默认值为false,设为true,保留之前路由中的查询参数/user?id=1 to /view?id=1

this.router.navigate([‘user‘, 1],{ fragment: ‘top‘ }); 路由中锚点跳转 /user/1#top

this.router.navigate([‘/view‘], { preserveFragment: true }); 默认值为false,设为true,保留之前路由中的锚点/user/1#top to /view#top

this.router.navigate([‘/user‘,1], { skipLocationChange: true }); 默认值为false,设为true路由跳转时浏览器中的url会保持不变,但是传入的参数依然有效

this.router.navigate([‘/user‘,1], { replaceUrl: true }); 未设置时默认为true,设置为false路由不会进行跳转

2. 以 /路由/参数  的方式跳转 -- snapshot方式

路由配置:  { path: ‘details/:id‘, component: bookDetailsComponent }

1. 指令跳转传参:

  

  <a [routerLink]="[‘/details‘, item.id]"</a>

2. js 跳转:

  

  this.router.navigate([‘/details‘, ‘1‘]

3. 获取参数

a. 快照方式获取参数 snapshot

this.queryParams = this.route.snapshot.params[‘id‘]

b. queryParams 方式获取参数

this.route.queryParams.subscribe(params=>{

  this.queryParams = params[‘id‘]

console.log(this.queryParams)

})

原文地址:https://www.cnblogs.com/monkey-K/p/11455272.html

时间: 2024-10-09 16:55:22

angular 路由跳转以及传参的相关文章

vue 路由跳转,传参

一.直接跳转 //js1.this.$router.push('/ad_new') //html 2.<router-link to="/ad_check"> <div class="top-menu-name">审核</div> </router-link> 二.跳转传参 query传参,参数会显示在url后面?id=? this.$router.push({ path: '/member', query: { id

vue的路由跳转及传参(编程式导航)

1)直接在路由中传参    this.$router.push({ path: `/childPage/${id}`, }) 需要对应路由配置如下: { path: '/childPage/:id', name: 'childPage', component: childPage } 获取参数:this.$route.parames.id 2) 通过路由属性中的name来确定匹配的路由,通过params来传递参数 this.$router.push({ name: 'childPage', pa

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参

JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转.传参(selected的值和页面其它元素的值) 代码如下: <script src="jquery.min.js" type="text/javascript"></script> <script language="javascript" type="text/javascript"> $(document

app之间的跳转和传参问题

app 之间跳转和传参: 首先 创建2个app   formApp (需要跳转到另外app的项目)     toApp(被跳转的项目) 一:在toApp 项目中的操作: 1:创建URLSchemes , (1).打开info.plist文件, 2. 在appdelegate.m 中 - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOpti

三种方式获取小程序页面跳转并传参

方法一.可以将数据保存在app.js文件中,因为app.js的数据是全局可见的,但是如果所有全局变量都放到app.js中,会导致该文件很臃肿 方法二.通过官方文档可知在页面onLoad生命周期的参数中获取打开当前页面路径中的参数.那么可以通过 wx.navigateTo()传递参数,跳转到官方文档. 数据可以传递一个或多个,也可传递数组和json对象 注意:因为url的长度有限,对象太长,结果发现拼接在URL之后不完整,导致之后解析不出来,所以路由传参对象时要注意,传参的对象不能太长. eg:

JS完成页面跳转并传参的方法|附加:循环遍历对象

此方法只能传递较少参数 方法如下: <a href='page/index.html'>跳转</a> 以上是正常写法,如果要传参按一下写法: <!--参数写在?后面,多个参数用&隔开,下面传的参数为name=lemon,age=18--> <a href='page/index.html?name=lemon&age=18'></a> 当跳转到页面的时候这个页面的地址栏就会跟你写的那个一样,这时候你只需要获取地址栏的内容并进行采取

Vue跳转页面传参

1.// 命名的路由 router.push({ name: 'user', params: { userId: 123 }}) ps:params这样的传参前面只能是name 2.// 带查询参数,变成 /register?plan=private router.push({ path: 'register', query: { plan: 'private' }}) 3.在routes定义path:‘/detail/:id’ 页面:to="/detail/+12345" 取参数的时

struts2 action跳转及传参

     环境:    配置了多个后缀,分别是:do.action.htm,如图所示:      redirectAction类型      跳转成功页面:      redirect类型      配置文件设置: 跳转成功页面:      redirect 和 dispatcher 传参      action间传参时,相应action均需要有相应属性,并都有getter和setter方法 传参配置: 传参成功页面: PS:注意字符串的 "" 参考链接:http://blog.kno

Spring MVC controller间跳转 重定向 传参 (转)

鸣谢:http://blog.sina.com.cn/s/blog_a85398ce0101f93x.html 1. 需求背景 需求:spring MVC框架controller间跳转,需重定向.有几种情况:不带参数跳转,带参数拼接url形式跳转,带参数不拼接参数跳转,页面也能显示. 2. 解决办法 需求有了肯定是解决办法了,一一解决,说明下spring的跳转方式很多很多,我这里只是说一些自我认为好用的,常用的,spring分装的一些类和方法. (1)我在后台一个controller跳转到另一个