// router.js
{
  path: '/product/list',
  name: 'ProductList',
  component: () => import('@/views/ProductList.vue'),
  meta: {
    keepAlive: true,      // 基礎(chǔ)緩存開關(guān)
    useCache: false,      // 動態(tài)緩存控制
    isBack: false         // 路由方向標(biāo)記
  }
}

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

<!-- ProductList.vue -->
<script>
export default {
  name: 'ProductList', // 必須與路由name一致
  data() {
    return {
      leaveTag: '',      // 路由方向標(biāo)記
      scrollTop: 0       // 滾動位置記錄
    }
  },
  
  // 路由守衛(wèi)實(shí)現(xiàn)緩存控制
  beforeRouteLeave(to, from, next) {
    // 判斷是否為返回操作
    const isBack = to.path !== '/product/search' && 
                  to.path !== '/product/detail';
    
    if (this.$route.meta.keepAlive) {
      if (isBack) {
        // 后退操作：保留緩存
        this.$route.meta.useCache = true;
        this.$route.meta.isBack = true;
        this.scrollTop = this.$refs.listContainer?.scrollTop || 0;
      } else {
        // 前進(jìn)操作：清除緩存
        this.clearKeepAliveCache();
        this.$route.meta.useCache = false;
      }
    }
    next();
  },
  
  methods: {
    // 深度清除keep-alive緩存
    clearKeepAliveCache() {
      const vnode = this.$vnode;
      const parent = vnode?.parent;
      if (!parent?.componentInstance?.cache) return;
      
      const key = vnode.key || `${vnode.componentOptions.Ctor.cid}::${vnode.componentOptions.tag}`;
      const cache = parent.componentInstance.cache;
      const keys = parent.componentInstance.keys;
      
      if (cache[key]) {
        delete cache[key];
        const index = keys.indexOf(key);
        if (index > -1) keys.splice(index, 1);
      }
    }
  },
  
  // 激活生命周期處理
  activated() {
    if (!this.$route.meta.useCache) {
      // 前進(jìn)場景：強(qiáng)制刷新數(shù)據(jù)
      this.fetchData();
    } else {
      // 后退場景：恢復(fù)狀態(tài)
      this.$nextTick(() => {
        this.$refs.listContainer.scrollTop = this.scrollTop;
      });
    }
  },
  
  // 組件創(chuàng)建時(shí)初始化數(shù)據(jù)
  created() {
    if (!this.$route.meta.useCache) {
      this.fetchData();
    }
  }
}
</script>

// router.js
const router = new VueRouter({ ... });

router.beforeEach((to, from, next) => {
  // 排除首次加載和特殊路由
  if (!from.name || to.path === '/login') {
    next();
    return;
  }
  
  // 標(biāo)記路由方向
  const isBack = [
    '/product/detail', 
    '/user/profile'
  ].includes(from.path);
  
  if (to.meta.keepAlive) {
    to.meta.isBack = isBack;
  }
  next();
});

// router.js
const router = new VueRouter({
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition && to.meta.isBack) {
      return savedPosition; // 后退時(shí)恢復(fù)滾動位置
    } else if (to.hash) {
      return { selector: to.hash }; // 錨點(diǎn)定位
    }
    return { x: 0, y: 0 }; // 前進(jìn)時(shí)重置滾動
  }
});

<!-- App.vue -->
<keep-alive :include="cachedComponents">
  <router-view v-if="$route.meta.keepAlive" />
</keep-alive>

<script>
export default {
  data() {
    return {
      cachedComponents: ['ProductList', 'OrderList']
    }
  },
  watch: {
    $route(to) {
      // 動態(tài)調(diào)整緩存白名單
      if (to.path.includes('/admin')) {
        this.cachedComponents = ['AdminDashboard'];
      }
    }
  }
}
</script>

// 在clearKeepAliveCache方法中添加
const cacheSize = Object.keys(cache).length;
console.log(`Cache size: ${cacheSize}, Hit rate: ${(1 - keys.length/cacheSize)*100}%`);

// 確保組件name與路由name一致
export default {
  name: 'ProductList', // 必須與路由配置中的name完全一致
  // ...
}

// 處理動態(tài)路由參數(shù)
watch: {
  '$route.params.id': {
    handler() {
      if (!this.$route.meta.isBack) {
        this.fetchData();
      }
    },
    immediate: true
  }
}

// 限制緩存數(shù)量
const MAX_CACHE_SIZE = 5;

// 修改clearKeepAliveCache方法
clearKeepAliveCache() {
  // ...原有清除邏輯
  
  // 超過最大緩存數(shù)時(shí)清除最久未使用
  const parent = this.$vnode?.parent;
  if (parent?.componentInstance?.keys.length > MAX_CACHE_SIZE) {
    const oldestKey = parent.componentInstance.keys[0];
    delete parent.componentInstance.cache[oldestKey];
    parent.componentInstance.keys.shift();
  }
}

// 路由配置中使用resolve語法
{
  path: '/product/list',
  name: 'ProductList',
  component: resolve => {
    require.ensure([], () => {
      resolve(require('@/views/ProductList.vue').default);
    }, 'product-list');
  },
  meta: { keepAlive: true }
}