为什么会取这样的标题名?有很多小伙伴会有这样的问题。我先解答一下,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>
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>
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>
在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>
通过上面,我们知道了如何在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, // 需要页面缓存
},
},
然后在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>
好,上面就是根据我在实际项目中遇到的问题的总结。
这是我之前发表在其他平台上的原创文章。
海纳百川,有容乃大。
我们下篇文章再见!