vue-cli 项目,开启了keep-alive后,怎么样让组件页的路由改变的同时刷新页面

vue项目,因为组件设置了keep-alive,所以组件会被缓存,但是该组建中有如图中的一段router-link代码功能。

当前地址 http://localhost/:8080/searchResult/dress

点击按钮后,地址变成了http://localhost/:8080/searchResult/women

但是地址虽然改了,但是没有刷新页面,所以数据没改变。

但是我发现,如果我手动点击刷新,新数据就会根据地址不同而改变数据。
所以想问问,怎么样在点击的时候,强制刷新页面。相当于组件刷新

图片描述

回答:

router-view 上加上一个唯一的 key,来保证路由切换时都会重新渲染触发钩子

<keep-alive v-if="$route.meta.keepAlive">
    <router-view :key="key"></router-view>
</keep-alive>
<router-view v-else :key="key"></router-view>

computed: {
  key() {
    // 或者 :key="$route.fullPath" 只要保证key唯一就可以了
    return this.$route.name !== undefined? this.$route.name + +new Date(): this.$route + +new Date()
  }
 }

回答:

<div class=”app”>

<keep-alive>
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

</div>

router里面有meta

回答:

watch:{
    $route(){
        //请求数据
    }
}

回答:

这东西。是个双刃剑。缓存的东西很难控制。
每次用新的还是好控制一些。

回答:

可以看一下vue-element-admin作者的解决方案 :
https://panjiachen.github.io/…
或者使用

beforeRouteEnter (to, from, next) { 
    next( vm => {
      // 进入页面后获取列表内容
      vm.dosth()
    }) }

回答:

有点迷茫 想问下 为什么既然需要组件刷新 还要使用keep-alive?

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注