uni app页面跳转后,刷新页面参数丢失问题

本文解决了uni-app项目中使用vueRouter时遇到的参数丢失问题。通过调整Router配置中的encodeURI选项为false,确保了页面刷新后URL参数得以保留。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

正常页面路由跳转地址应该是这样的:http://localhost:8080/#/pages/study/hiring?id=1393112968202870785

浏览器刷新之后就编程这样子:http://localhost:8080/#/pages/study/hiring

参数丢失了

uni app 使用的还是 vue Router, 将 在实例化Router对象时,设置encodeURI:false就没有这个问题了

正常的新建一个项目没有这个问题,使用的jeecg提供uni app模板,就出现了这样的问题
common\router\index.js

const router = new Router({
	encodeURI:true,
    routes: [...modules]//路由表
});

encodeURI设置为false就可以了

### 如何在使用 `uni.navigateTo` 跳转刷新目标页面或返回上一页并刷新UniApp 开发中,`uni.navigateTo` 是一种常见的页面跳转方式。然而,当从一个页面跳转到另一个页面时,目标页面可能需要刷新数据,或者返回上一页时也需要刷新数据[^1]。以下是实现这些需求的几种方法: #### 方法一:通过 `onShow` 生命周期刷新目标页面 在目标页面(例如 B 页面)中,可以利用 Vue 的生命周期钩子 `onShow` 来刷新数据。`onShow` 会在页面每次显示时触发,因此无论用户是通过 `navigateTo` 进入还是通过其他方式返回该页面,都可以确保数据被刷新。 ```javascript export default { data() { return { list: [] }; }, onShow() { this.list = []; // 先清空数据 this.getlist(); // 再重新请求数据 }, methods: { getlist() { // 模拟获取数据 console.log("正在刷新数据..."); this.list = ["数据1", "数据2", "数据3"]; } } }; ``` 这种方法适用于目标页面需要在每次进入时都刷新数据的场景[^4]。 #### 方法二:通过 `getCurrentPages` 获取上一页实例并刷新 如果需要在子页面(B 页面)返回父页面(A 页面)时刷新页面的数据,可以通过 `getCurrentPages()` 获取当前页面栈,并直接操作上一页的实例。 以下是一个示例代码: ```javascript // 子页面 (B 页面) methods: { submit() { const pages = getCurrentPages(); // 获取页面栈 const prevPage = pages[pages.length - 2]; // 获取上一页实例 if (prevPage) { prevPage.$vm.list = []; // 清空上一页的数据 prevPage.$vm.getlist(); // 调用上一页的刷新方法 } uni.navigateBack({ delta: 1 }); // 返回上一页 } } ``` 这种方式适用于需要在子页面返回父页面时,主动刷新页面数据的场景[^5]。 #### 方法三:通过事件监听机制刷新上一页 UniApp 提供了全局事件监听器 `uni.$on` 和事件触发器 `uni.$emit`,可以在子页面触发事件,父页面监听事件并执行刷新逻辑。 以下是具体实现: **父页面 (A 页面)**: ```javascript export default { data() { return { list: [] }; }, onLoad() { uni.$on("refreshData", () => { // 监听事件 this.list = []; // 清空数据 this.getlist(); // 刷新数据 }); }, methods: { getlist() { console.log("正在刷新数据..."); this.list = ["数据1", "数据2", "数据3"]; } } }; ``` **子页面 (B 页面)**: ```javascript methods: { submit() { uni.$emit("refreshData"); // 触发事件 uni.navigateBack({ delta: 1 }); // 返回上一页 } } ``` 这种方法的优点是解耦性强,适合在父子页面之间传递复杂参数或触发特定逻辑的场景[^5]。 #### 注意事项 - 如果在 H5 环境下强制刷新页面,可能会导致页面丢失问题,从而无法正常返回上一页。此时可以结合原生 JavaScript 的 `history` 对象封装兼容方法[^3]。 - 在小程序和 App 环境下,推荐使用 `getCurrentPages()` 或事件监听机制来实现页面间的通信和数据刷新--- ### 示例代码总结 ```javascript // 方法一:目标页面通过 onShow 刷新数据 export default { onShow() { this.list = []; this.getlist(); }, methods: { getlist() { console.log("正在刷新数据..."); } } }; // 方法二:通过 getCurrentPages 获取上一页实例并刷新 const pages = getCurrentPages(); const prevPage = pages[pages.length - 2]; if (prevPage) { prevPage.$vm.list = []; prevPage.$vm.getlist(); } // 方法三:通过事件监听机制刷新上一页 // 父页面 uni.$on("refreshData", () => { this.list = []; this.getlist(); }); // 子页面 uni.$emit("refreshData"); ``` ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值