uniapp页面带参数跳转不刷新怎么解决

1. 问题背景

在uniapp中，我们经常需要进行页面跳转，并且有时会需要传递参数。然而，在传递参数并跳转后，有时候新页面不会刷新，这给我们带来了不便。本文将解决这个问题，帮助您实现uniapp页面带参数跳转后自动刷新。

2. 问题分析

为了解决这个问题，我们需要明确问题的原因。在uniapp中，页面跳转是通过`uni.navigateTo`进行的，该函数的实现是将新页面压入原页面栈中，因此新页面并不是全新加载的，而是复用了原页面的部分内容。因此，我们需要在新页面中手动触发一次`onShow`事件，以实现页面刷新。

3. 解决方案

3.1 在新页面中手动触发onShow事件

为了让新页面刷新，我们可以在新页面的`onLoad`生命周期函数中手动触发`onShow`事件。这样可以保证页面在跳转后能够及时刷新。实现代码如下所示：

onLoad(options) {
  // 手动触发onShow事件，以刷新页面
  this.onShow();
},
onShow() {
  // ... 页面刷新操作
}

3.2 通过传递随机参数实现刷新

除了手动触发`onShow`事件，我们还可以通过传递随机参数的方式实现刷新。具体思路是将一个随机参数传递到新页面中，在新页面中监听该参数的变化，一旦变化即进行刷新操作。实现代码如下所示：

在原页面中进行跳转并传递随机参数：

const random = Math.random();
uni.navigateTo({
  url: '/pages/newPage/newPage?random=' + random
});

在新页面中监听参数变化并进行刷新操作：

onLoad(options) {
  // 监听参数变化
  this.watchRandom();
},
watchRandom() {
  this.$watch('random', function(val, oldVal) {
    // 进行刷新操作
  });
}

4. 总结

本文介绍了两种解决uniapp页面带参数跳转不刷新的方案：手动触发`onShow`事件和传递随机参数实现刷新。这两种方案各有优劣，选择哪种方案根据具体情况而定。无论采用哪种方案，都能够解决页面跳转后不刷新的问题。