Sign in

vue - CLI project, open keep - After alive, how to refresh the component page while changing its routing

ziasu edited in Sat, 17 Sep 2022

Vue project, because the component has set keep - So the component will be cached, but the component is like a router in the figure - Link code function.

Current address http://localhost :8080/searchResult/dress

After clicking the button, the address changes to http://localhost :8080/searchResult/women

But although the address changed, but did not refresh the page, so the data did not change.

But I found that if I click refresh manually, the new data will change according to the address. So I want to ask how to force refresh the page when clicking. Equivalent to component refresh


6 Replies
commented on Sat, 17 Sep 2022

Add a unique key to the router view to ensure that the trigger hook will be re rendered during route switching

<keep-alive v-if="$route.meta.keepAlive">
    <router-view :key="key"></router-view>
<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()
commented on Sat, 17 Sep 2022

<div class="app">

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


There is meta in router

commented on Sat, 17 Sep 2022
commented on Sat, 17 Sep 2022

This thing. It's a double-edged sword. It's hard to control what's cached. It's better to control each time you use a new one.

commented on Sun, 18 Sep 2022

Take a look at the solution of Vue element admin Author: https://panjiachen.github.io/... Or use

beforeRouteEnter (to, from, next) { 
    next( vm => {
      // 进入页面后获取列表内容
    }) }
commented on Sun, 18 Sep 2022

I'm a little confused. Why should I use keep alive when component refresh is needed?