路由跳转,传参及接收

扶园

已于 2023-11-02 16:52:52 修改

阅读量593

点赞数 1

文章标签：前端 javascript

于 2023-09-20 18:01:53 首次发布

本文链接：https://blog.youkuaiyun.com/fy1879047121/article/details/133066025

版权

一、vue2+js

1.query传参

参数在地址栏上,刷新后数据还在. 数据比较复杂的时候,会解析不出来

//传递参数
this.$router.push({
	path:"路由",
	query:{
		//参数
	}
})

//接收参数
created(){
    this.$route.query;
}

2.params传参

参数不在地址栏,刷新数据不在了. 我们可以把数据存储本地或会话存储,还可以把数据存储vuex中

//传递参数
this.$router.push({
	name:"路由的名字",
	params:{
		//参数
	}
})

//接收参数
created(){
    this.$route.params;
}

3.动态路由传参

//传递参数
 {
    path: "/contact/:id",//在路由上访问组件的时候,地址携带数据
    component: Contact
  },

//接收参数
created(){
     this.$route.params;
}

二、uniapp

1.普通跳转

//传
uni.navigateTo({
	url: '/subpkg/confirm_order/confirm_order?orderId=' + this.id
});

//页面接收
onLoad(options) {
	if (options.orderId) {
		this.orderId = options.orderId
	}
},

2.传的东西太多可能会乱码,就需要转码

//传
uni.navigateTo({
	url: `/subpkgintegral/goods_detail/goods_detail?makingSn=${this.makingSn}&goods=${encodeURIComponent(JSON.stringify(goods))}`
//或者
uni.navigateTo({
	url: '/subpkguser/afterSales/afterSales?countsData=' + encodeURIComponent(JSON.stringify(this.countsData))
});
			
 //页面接收
onLoad(options) {
	this.orderGoods = JSON.parse(decodeURIComponent(option.goods));
},

3.uniapp页面跳转

1.uni.navigateTo：用于打开新页面，并保留当前页面。用户可以返回到上一个页面
2.uni.redirectTo：用于关闭当前页面并打开新页面。用户无法返回到上一个页面
3.uni.switchTab：用于跳转到带有 Tab 的页面，并关闭其他所有非 Tab 页面
4.uni.reLaunch：用于关闭所有页面，并打开新页面
5.uni.navigateBack：用于返回到上一个页面