(1)列表頁,1,2,3,4,5,6
切換到第3頁,然后點擊列表中的某一個查看詳情,,再點擊返回的時候,列表頁切換到了第一頁
(2)列表頁做一系列的條件篩選后100條只剩下10條,然后點擊10條中的一條去查看詳情,再點擊返回,列表重新回到100條
頁面AppMain.vue:

<template>
  <section class="app-main">
    <transition name="fade" mode="out-in">
      <!-- <router-view :key="key"></router-view> -->
      <router-view></router-view>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    // key() {
    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>

所以需要做緩存,在AppMain.vue頁面

<keep-alive>
     <router-view></router-view>
</keep-alive>

達(dá)到上述需求,但是列表頁轉(zhuǎn)詳情的時候,通過id獲取的詳情頁面接口沒有更新,沒有重新獲取接口,也就是說詳情頁也緩存了

所以又找了方法,修改AppMain.vue

<template>
  <section class="app-main">
  <transition name="fade" mode="out-in">
      <div>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
      </div>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    // key() {
    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    // }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>

路由配置文件也增加:keepAlive: true 為

{
    path: 'channelPriceRecord',
    name: '渠道價格配置記錄',
    component: () =>
                    import('@/views/params/channelPriceRecord'),
    meta: { title: '渠道價格配置記錄', icon: 'tree', keepAlive: true }
  }

菜單點擊刷新頁面

通過改變router-view中的key來達(dá)到刷新組件的目的

參看鏈接https://blog.csdn.net/mnhn456/article/details/78758789/

<template>
  <section class="app-main">
  <transition name="fade" mode="out-in">
      <div>
        <keep-alive>
          <router-view v-if="$route.meta.keepAlive" :key='key'></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" :key='key'></router-view>
      </div>
    </transition>
  </section>
</template>

<script>
export default {
  name: 'AppMain',
  computed: {
    key() {
      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>

</style>