UniApp 中页面跳转的方法及传值

一、UniApp 中页面跳转的方法及特点

（一）常见的页面跳转方法

1. uni.navigateTo：
   • 用途：用于跳转到应用内的某个页面，非 tabBar 页面，它会保留当前页面，打开新的页面并推入页面栈中。
   • 特点：可以通过页面栈管理返回原页面，在新页面返回时可以返回到原页面继续操作流程。
2. uni.redirectTo：
   • 用途：关闭当前页面，重定向到应用内的某个页面（非 tabBar 页面）。
   • 特点：与 uni.navigateTo 的区别在于它不能返回原页面，而是直接替换当前页面进行跳转。
3. uni.reLaunchLaunch：
   • 用途：关闭所有页面，打开到应用内的某个页面。
   • 特点：可以跳转到任意页面并清空所有历史页面栈，常用于应用的重启或者跳转到首页等场景。
4. uni.navigateBack：
   • 用途：用于关闭当前页面，返回上一页面或多级页面（通过设置 delta 参数来控制返回的页面层级数量）。通常用于在页面栈中进行返回操作，比如从一个详情页面返回到列表页面。
   • 特点：只能返回到已经存在于页面栈中的页面，并且无法直接跳转到 tabBar 页面（底部导航栏定义的页面）。
5. uni.switchTab：
   • 用途：专门用于跳转到 tabBar 页面（即应用底部导航栏所定义的那些页面），并且会关闭所有非 tabBar 页面。它是用于在 tabBar 页面之间进行切换的方法。
   • 特点：只能跳转到 tabBar 页面，并且会清除非 tabBar 页面的历史记录，直接切换到指定的 tabBar 页面并重新加载该页面。

（二）页面跳转传值的方法

1、使用路由参数传递简单数据：

对于 uni.navigateTo、uni.redirectTo 和 uni.reLaunch 等跳转方法，可以在跳转的目标页面路径后面直接拼接参数。

例如：

 // 假设要跳转到名为 pageB 的页面并传递一个名为 id 的参数值为 123
   uni.navigateTo({
     url: '/pages/pageB/pageB?id=123'
   });

在目标页面的 onLoad 生命周期函数中接收参数：

 export default {
     onl oad(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'])
     },
     onl oad() {
       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 {
     onl oad() {
       const data = uni.getStorageSync('sharedData');
       console.log(data);
     }
   };