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

Question

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

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

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

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

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

Answer 1

在 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()
  }
 }

Answer 2

<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

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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