Vue3+ts中,组件name进行缓存组件,keep-alive页面缓存,script setup中名称的简写

在Vue3 + ts,开发中,当我们使用keep-alive缓存页面中输入内容的时候,include中是需要缓存页面的名称。

2.被缓存的页面,需要将名称单独写出来,非常之麻烦

3.此时需要安装一个插件,(开发环境中使用,打包的时候会处理好)

 npm i vite-plugin-vue-setup-extend-plus -D

4.安装好了之后,还需要在vite.config.ts中配置一下

import vueSetupExted from 'vite-plugin-vue-setup-extend-plus';

  plugins: [

    vue(),

    vueSetupExted(),//使用<script setup name="**" 上Name作为缓存名>

  ],

5.安装和配置好,之后重启项目

然后就可以在vue文件中,这样书写了

需要注意的是:

这里的name,要和路由中的那么保持一致,否则不生效