如何在Vue3.2的setup中设置组件名、在vben-admin中实现页面缓存？

为什么会取这样的标题名？有很多小伙伴会有这样的问题。我先解答一下，vue2.x和vue3.x设置组件名的方式不一样，想要通过keep-alive实现页面缓存，一定要设置组件名，所以有个先后顺序，先设置组件名，然后实现页面缓存。

我们先看一下在Vue2.x和Vue3.x中分别是怎么设置组件名的？

Vue2.x

Vue2.x直接在export default { }使用name属性命名组件名，例子如下：设置组件名为App

app.vue的script这部分代码如下：

<script>
import Hello from './components/hello.vue'
import axios from 'axios'
export default {  
   name: 'App',  
   components: { Hello },  
   created(){     
      axios.get('api/goods').then(res=>{       
        console.log(res);       
        console.log(res.data); 
        //{"errno":0,"data":{"goods":["牛奶","鸡蛋"]}}     
      })  
   },  
   mounted(){    
      console.log('123456');  
   }
}
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Vue3.x

Vue3.x设置组件名有两种方式：

1、一个Vue单文件组件中设置两个script，在其中一个script中使用defineComponent的方式设置。

例子如下：设置组件名为Analysis
analysis.vue的script这部分代码如下：

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({  
    name:'Analysis'
})
script>

<script lang="ts" setup>  
import { ref } from 'vue';  
import GrowCard from './components/GrowCard.vue';  
import SiteAnalysis from './components/SiteAnalysis.vue';  
import VisitSource from './components/VisitSource.vue';  
import VisitRadar from './components/VisitRadar.vue';  
import SalesProductPie from './components/SalesProductPie.vue';  
  const loading = ref(true);  
  setTimeout(() => {    
     loading.value = false;  
  }, 1500);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

2、使用插件vite-plugin-vue-setup-extend

因为我目前的做的项目使用的是Vite，所以使用的对应插件是vite-plugin-vue-setup-extend。

例子如下：设置组件名为Analysis

先在vite.config.ts中设置

<script lang="ts">  
import VueSetupExtend from 'vite-plugin-vue-setup-extend'
export default{
  ....
  plugins: [ VueSetupExtend() ]
  ....
}
script>  
1
2
3
4
5
6
7
8

在script标签上设置name属性，属性名就是组件名
analysis.vue的script这部分代码如下（name属性为Analysis）：

<script lang="ts" setup name="Analysis">  
import { ref } from 'vue';  
import GrowCard from './components/GrowCard.vue';  
import SiteAnalysis from './components/SiteAnalysis.vue';  
import VisitSource from './components/VisitSource.vue';  
import VisitRadar from './components/VisitRadar.vue';  
import SalesProductPie from './components/SalesProductPie.vue';  
    const loading = ref(true);  
    setTimeout(() => {    
       loading.value = false;  
    }, 1500);
script>
1
2
3
4
5
6
7
8
9
10
11
12

通过上面，我们知道了如何在Vue3.2中设置组件名。那在vben-admin这个开源项目中如何实现页面缓存呢？

以analysis.vue这个页面为例
首先在路由中设置ignoreKeepAlive属性为false 如下：

children: [    
   { 
     path: 'analysis', 
     name: 'Analysis',      
     component: '/dashboard/analysis/index',      
     meta: {        
       hideMenu: true,        
       hideBreadcrumb: true,        
       title: 'routes.dashboard.analysis',        
       currentActiveMenu: '/dashboard',        
       icon: 'bx:bx-home',        
       ignoreKeepAlive: false,  // 需要页面缓存      
     },    
   },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

然后在analysis.vue的script标签中设置name属性值，这样就实现了页面缓存效果。

// 设置script标签的name属性值为Analysis
<script lang="ts" setup name="Analysis">  
import { ref } from 'vue';  
import GrowCard from './components/GrowCard.vue';  
import SiteAnalysis from './components/SiteAnalysis.vue';  
import VisitSource from './components/VisitSource.vue';  
import VisitRadar from './components/VisitRadar.vue';  
import SalesProductPie from './components/SalesProductPie.vue';  
    const loading = ref(true);  
    setTimeout(() => {    
       loading.value = false;  
    }, 1500);
script>
1
2
3
4
5
6
7
8
9
10
11
12
13

好，上面就是根据我在实际项目中遇到的问题的总结。

这是我之前发表在其他平台上的原创文章。

海纳百川，有容乃大。

我们下篇文章再见！