UniApp 中页面跳转的方法及传值
一、UniApp 中页面跳转的方法及特点
（一）常见的页面跳转方法
uni.navigateTo：- 用途：用于跳转到应用内的某个页面，非 tabBar 页面，它会保留当前页面，打开新的页面并推入页面栈中。
- 特点：可以通过页面栈管理返回原页面，在新页面返回时可以返回到原页面继续操作流程。
uni.redirectTo：- 用途：关闭当前页面，重定向到应用内的某个页面（非 tabBar 页面）。
- 特点：与
uni.navigateTo的区别在于它不能返回原页面，而是直接替换当前页面进行跳转。
uni.reLaunchLaunch：- 用途：关闭所有页面，打开到应用内的某个页面。
- 特点：可以跳转到任意页面并清空所有历史页面栈，常用于应用的重启或者跳转到首页等场景。
uni.navigateBack：- 用途：用于关闭当前页面，返回上一页面或多级页面（通过设置
delta参数来控制返回的页面层级数量）。通常用于在页面栈中进行返回操作，比如从一个详情页面返回到列表页面。 - 特点：只能返回到已经存在于页面栈中的页面，并且无法直接跳转到 tabBar 页面（底部导航栏定义的页面）。
- 用途：用于关闭当前页面，返回上一页面或多级页面（通过设置
uni.switchTab：- 用途：专门用于跳转到 tabBar 页面（即应用底部导航栏所定义的那些页面），并且会关闭所有非 tabBar 页面。它是用于在 tabBar 页面之间进行切换的方法。
- 特点：只能跳转到 tabBar 页面，并且会清除非 tabBar 页面的历史记录，直接切换到指定的 tabBar 页面并重新加载该页面。
（二）页面跳转传值的方法
1、使用路由参数传递简单数据：
对于 uni.navigateTo、uni.redirectTo 和 uni.reLaunch 等跳转方法，可以在跳转的目标页面路径后面直接拼接参数。
例如：
// 假设要跳转到名为 pageB 的页面并传递一个名为 id 的参数值为 123uni.navigateTo({url: '/pages/pageB/pageB?id=123'});
在目标页面的 onLoad 生命周期函数中接收参数：
export default {onLoad(options) {if (options.id) {const idValue = options.id;console.log(idValue);}}};
2、使用全局变量或状态管理工具传递复杂数据：
- 如果需要传递复杂的对象或大量数据，可以借助全局变量或者状态管理工具（如 Vuex）。
- 例如使用 Vuex：
- 在源页面的某个方法中通过
commit一个 mutation 来将数据存储到 Vuex store 中：
import { mapMutations } from 'vuex';export default {methods: {...mapMutations(['setData']),goToTargetPage() {const complexData = { key: 'value', array: [1, 2, 3] };this.setData(complexData);uni.navigateTo({url: '/pages/targetPage/targetPage'});}}};
- 在 Vuex store 中定义 mutation 和 state 来处理数据存储：
import Vue from 'vue';import Vuex from 'vuex';Vue.use(Vuex);const store = new Vuex.Store({state: {dataToShare: null},mutations: {setData(state, data) {state.dataToShare = data;}}});export default store;
- 在目标页面中从 Vuex store 中获取数据：
import { mapState } from 'vuex';export default {computed: {...mapState(['dataToShare'])},onLoad() {console.log(this.dataToShare);}};
3、使用本地存储传递数据
- 可以在源页面将数据存储到本地存储（uni.setStorage 或 uni.setStorageSync）中，然后在目标页面读取（uni.getStorage 或 uni.getStorageSync）。
- 例如在源页面存储数据
const dataToPass = { name: 'example', age: 20 };uni.setStorageSync('sharedData', dataToPass);uni.navigateTo({url: '/pages/targetPage/targetPage'});
- 在目标页面获取数据：
export default {onLoad() {const data = uni.getStorageSync('sharedData');console.log(data);}};