vue 缓存不刷新某个页面

场景是列表页有搜索条件后跳入详情页，从详情页返回列表页不刷新。

在列表和详情页设置keepAlive

//路由页

meta: {

      title: '详情页',

      keepAlive: true //此组件需要被缓存

 }

meta: {

      title: '列表',

      keepAlive: true //此组件需要被缓存

  }

//app.vue页

<router-view v-slot="{ Component }" v-if="$route.meta.keepAlive">
          <keep-alive>
                <component :is="Component" />
          </keep-alive>
      </router-view>
      <router-view v-slot="{ Component }" v-if="!$route.meta.keepAlive">
          <component :is="Component" />
      </router-view>

这种方式详情页也会被缓存， 有两个方法。

第一个方法是进入详情页时重新弹出一个页面，详情页是新页面。 详情返回列表时关闭页面，这个方式适合pc端手机端无效

//打开新页面
let routeData = router.resolve({ path: '/detail', query: { id:data.id} });
window.open(routeData.href, '_blank');


//关闭页面
window.close();

第二个方法是进入详情页后判断路由，如果从列表页进入，页面不刷新但重新获取数据。

 

watch:{
        $route(to,from){
            if(from.name=='list'){
                this.productId=this.$route.query.id
                this.getData()
            }
        }
    }