vue3.2 Keepalive踩坑

Snipaste_20220721_193547.png

先说说Vue3 keepalive的用法

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
<router-view v-slot="{ Component }"> <transition appear name="fade-transform" mode="out-in"> <keep-alive :include="['articleList', 'articlePub', 'home']"> <component :is="Component"></component> </keep-alive> </transition> </router-view>

今天就这个include的属性就是不生效。搞了一天搜索找答案。 首先上述写法没有问题,那么搞了一天碰到的问题就在于include并没有识别到组件的name。

重点

这里首先搞清楚include识别的并非router里的name,而是组件自己的属性name。

Snipaste_20220721_180254.jpg

也就是说上述的name是没有用的。

那么问题来了,如何在下面vue3.2+给的代码里附上组件名。

          
  • 1
  • 2
  • 3
  • 4
<script setup lang="ts"> import { ref } from "vue"; const testdata = ref(""); </script>

那么知道原因就知道怎么找答案了。下面是网上找到三种答案。

解决方案

  • 方法一 新增一个script标签
          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
<script lang="ts"> export default { name: "home" }; </script> <script setup lang="ts"> import { ref } from "vue"; const testdata = ref(""); </script>
  • 方法二 使用unplugin-vue-define-options插件

① 安装插件 yarn add unplugin-vue-define-options -D

② 集成插件 在vite.config.ts文件引入插件unplugin-vue-define-options

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import DefineOptions from 'unplugin-vue-define-options/vite' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue(), DefineOptions()], })

③ 集成完成之后,那么可以直接使用了,如果在TypeScript中报错了(比如在d.ts的配置文件中加入描述)

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
<script setup lang="ts"> defineOptions({ name: 'Layout' }) </script> <template> <div>layout</div> </template> <style lang="less" scoped></style>
  • 方法三 使用 vite-plugin-vue-setup-extend插件(推荐)
  1. 安装插件 yarn add vite-plugin-vue-setup-extend -D

  2. 集成插件 在vite.config.ts文件引入vite-plugin-vue-setup-extend

          
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' import vueSetupExtend from 'vite-plugin-vue-setup-extend' export default defineConfig({ plugins: [vue(), vueSetupExtend()] })
  1. vue文件的setup中直接使用name属性
          
  • 1
  • 2
  • 3
  • 4
<script setup lang="ts" name="home"> </script>
(完)
恶魔在人间
费县515案件
Vue Class 与 Style 的动态绑定
做组件常用
记面试碰到的一题
Map对象的使用
谈谈债券,可转债,国债
债券到底是什么?可转债和债券的关系?可转债啥时卖?国债利率上升对股市,经济产生的影响?
春节那点事
对象那点事ヽ(ー_ー)ノ
他们说,鱼只有7秒的记忆
好像我也强不了多少吧!!!
等待你的评论