vue 使用 keep-alive 需要注意的几个点_vue3keepalive不写name-CSDN博客

本文链接：https://blog.csdn.net/baidu_38942289/article/details/123878878

1、v-if=“$route.meta.keepAlive” 需要放在router-view上，不能放在keep-alive上

<template>
  <div id="app">    
    <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>
<script>

2、需要缓存的界面它的进入页也需要缓存，即列表页需要缓存，那么详情页也需要缓存，否则就不在同一个router-view 中无法实现缓存

  {
    path: '/exhibitionList',
    name: 'ExhibitionList',
    // component: () => import('@/views/regions/Xm'),
    component: () => import('@/views/details/ExhibitionList'),
    meta: { title: 'details_exhibitor_members', keepAlive: true,scrollTop: 0}
  },
  {
    path: '/exhibitionDetail',
    name: 'exhibitionDetail',
    // component: () => import('@/views/regions/Xm'),
    component: () => import('@/views/details/ExhibitionDetail'),
    meta: { title: 'details_exhibitor_details', keepAlive: true }
  },

name 要配置正确，路由上定义的名称要与页面名称一致

（另外需要注意的是页面名称不能与引入的组件名称一致，否则会报错）

export default {
  name: 'ExhibitionList', // 是这里的name
  data() {
    return {
     
    };
  },

这里就是需要注意的点了，每次写都有一点曲折，这里记录一下，总结一下，方便下回查阅

个人学习笔记