记一次Keep-Alive与router-view，加key有大坑

最新推荐文章于 2024-12-20 16:24:29 发布

努力搬砖的宣

最新推荐文章于 2024-12-20 16:24:29 发布

阅读量2.1k

点赞数 9

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_65035567/article/details/139776747

版权

记一次Keep-Alive与router-view，加key有大坑

背景：

我在做Keep-Alive结合Router-View进行页面级的组件缓存时，缓存的数据在页面切换后没有保留。同时每次路由切换，onMounted和onActivated都会执行。

代码如下：

<router-view v-slot="{ Component }" :key="route.path">
          <keep-alive>
            <component class="view" :is="Component"/>
          </keep-alive>
</router-view>

排查思路：

首先我去官网抄了一段KeepAlive的示例代码，放到了RouterView的外层，发现并无问题。显然是我RouterView的使用方法有误。

官网示例：

<script setup>
import {
    shallowRef } from 'vue'
import CompA from './CompA.vue'
import CompB from './CompB.vue'
// 进行浅层代理，避免不必要的花销
const current = shallowRef(CompA)
</script>

<template>
  <div class="demo">
    <!--切换时，current.value值会发生改变  -->
    <label><input type="radio" v-model="current" :value="CompA" /> A</label>
    <label><input type="radio" v-model="current"