uniapp 页面持续传参

### UniApp页面间持续传递参数的方法 在UniApp中，为了实现页面间的持续传递参数，通常有几种有效的方式。这些方式不仅限于简单的URL传参，还包括利用全局变量、Vuex状态管理库以及本地存储等方式。 #### 使用URL进行参数传递 对于简单场景下的页面跳转与参数传递，可以通过`url`携带参数完成。这种方式适用于一次性传递少量数据的情况[^1]： ```javascript uni.navigateTo({ url: '/pages/targetPage/targetPage?id=1&name=test' }); ``` 目标页面可以在`onLoad`生命周期钩子中获取这些参数: ```javascript export default { onLoad(options) { console.log('Received options:', options); } } ``` 然而，当涉及到复杂对象或者希望在整个应用周期内保持某些参数不变时，仅靠URL可能不够灵活和安全。 #### 利用全局变量或Application实例 另一种常见做法是在应用程序启动时创建一个全局的对象来保存需要共享的数据。这样做的好处是可以方便地访问任何地方而无需每次都通过URL传输[^4]。 ```javascript // app.vue or main.js import Vue from 'vue'; const App = new Vue(); App.globalData = {}; // 定义全局数据容器 export { App }; // 在任意组件里设置/读取全局数据 this.$root.globalData.someKey = someValue; console.log(this.$root.globalData.someKey); ``` 这种方法适合小型项目快速迭代使用，但对于大型项目的维护性和扩展性较差。 #### Vuex状态管理模式 针对更复杂的业务逻辑需求，推荐采用[Vuex](https://vuex.vuejs.org/)来进行集中式的状态管理。它允许开发者定义store中的state，并通过mutation和action操作更新它们，在各个模块之间同步最新的状态变化[^3]。 初始化Store配置如下所示： ```javascript import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); export default new Vuex.Store({ state: { sharedData: null, }, mutations: { updateSharedData(state, payload){ state.sharedData = payload; } }, actions: {}, modules: {} }) ``` 之后便可在任一组件内部轻松存取公共资源： ```javascript methods:{ saveToStore(){ this.$store.commit('updateSharedData', { key:'value'}); }, getFromStore(){ const data = this.$store.state.sharedData; console.log(data); } } ``` #### LocalStorage / SessionStorage持久化解决方案 如果想要让部分重要信息即使关闭浏览器也能继续存在，则可以考虑借助HTML5提供的LocalStorage API或是SessionStorage API。前者会在用户主动清除缓存前一直保留记录；后者则只维持会话期间的有效期[^5]。 ```javascript // 存储数据 localStorage.setItem('key','value'); sessionStorage.setItem('key','value'); // 获取并解析JSON格式的内容 let obj = JSON.parse(localStorage.getItem('key')); obj = JSON.parse(sessionStorage.getItem('key')); // 移除指定项 localStorage.removeItem('key'); sessionStorage.removeItem('key'); ``` 以上四种策略各有优劣之处，具体选择取决于实际应用场景和个人偏好。合理运用上述技术手段能够很好地解决UniApp开发过程中遇到的各种跨页面通讯难题。