uni-app 页面传参实战

叁歲伎倆 2021-12-05 05:27 476阅读 0赞

## 页面跳转 ##

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

> 保留当前页面，跳转到应用内的某个页面，使用 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
    	})
    }