微信小程序webview作为tabBar页面,切换tabBar时webview页面数据无法刷新?

265 阅读1分钟

打印日志,发现vue中的route.beforeEach方法执行了,from和to指向了同样的页面。 因为Vue Router默认认为带有相同名称的路由是同一个页面,不会重新加载组件,除非整个路由路径改变。为了解决这个问题,你可以这样做:

使用key属性强制组件重新渲染

在你的/cart页面组件上,可以利用:key属性来强制Vue识别为一个新的组件实例,从而重新渲染。你可以将:key绑定到一个能够反映页面状态(如查询参数)的值上。

vue
<!-- CartPage.vue -->
<template>
  <div :key="cartKey">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  computed: {
    cartKey() {
      // 使用timestamp作为key的一部分,确保当timestamp变化时,key也变化
      return `cart-${this.$route.query.timestamp}`;
    },
  },
  // ... 其他逻辑 ...
};
</script>

这样,每当timestamp查询参数变化时,Vue会认为这是一个全新的组件,从而重新渲染页面并触发数据的获取。