uni-app 页面传参实战

最新推荐文章于 2025-07-18 15:28:26 发布

_龙衣

最新推荐文章于 2025-07-18 15:28:26 发布

阅读量4.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： Android 小程序之旅

本文链接：https://blog.csdn.net/ITxiaodong/article/details/96364001

Android 同时被 2 个专栏收录

86 篇文章

订阅专栏

小程序之旅

57 篇文章

订阅专栏

本文详细介绍了UniApp中各种页面跳转的方法及其区别，包括保留当前页面的跳转、不保留当前页面的跳转、关闭所有页面重新打开以及跳转到tabBar页面等，并给出了具体的实现代码示例。

页面跳转

保留当前页面并跳转新页面

保留当前页面，跳转到应用内的某个页面，使用 uni.navigateBack可以返回到原页面。

例子：

跳转到 test 文件夹下的 test 页面

uni.navigateTo({
    url: '../test/test'
});

不保留当前页面并跳转新页面

关闭当前页面，跳转到应用内的某个页面。

例子：

跳转到 test 文件夹下的 test 页面

uni.redirectTo({
    url: '../test/test'
});

关闭所有页面并打开一个页面

关闭所有页面，打开到应用内的某个页面。

例子：

跳转到 test 文件夹下的 test 页面

uni.reLaunch({
    url: '../test/test'
});

跳转到 tabBar 页面

只能使用 switchTab 跳转，并关闭其他所有非 tabBar 页面。

pages.json 中配置的 tabBar
{
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    },{
      "pagePath": "pages/other/other",
      "text": "其他"
    }]
  }
}

other.vue 页面切换
uni.switchTab({
    url: '/pages/index/index'
});

返回上一个页面或者返回第几个页面

uni.navigateBack(OBJECT) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

页面传参

现在<template>中获取数据

:data-postid="item.post_id" 就是要传递的 数据，通过 `:data-`开头+参数即可
<template>
	<view>
		<view class="page-section indexListBox">
			<view class="indexList" v-for="(item , index) in homePosts" :key="index">
				<view class="button-to-detail">
					<button @tap="onItemClick" :data-postid="item.post_id">点击查看详情</button>
				</view>
			</view>
		</view>
	</view>
</template>

在<script>中得到点击的数据，接着在页面跳转时传递

onItemClick(e) {
	let post_id = e.currentTarget.dataset.postid
	uni.navigateTo({
		url: '../detail/detail?post_id=' + post_id
	})
}