(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>

达到上述需求,但是列表页转详情的时候,通过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来达到刷新组件的目的

参看链接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>