网站服务器租,免费建网站那个好,电商网站开发平台,网店代运营公司哪家强keepalive没有效果#xff0c;无法缓存页面#xff1f; 问题大概是组件的name值不对应#xff0c;vue2修改组件文件的name值#xff0c;vue3保持组件文件名称和路由页面配置的name一致就可以了#xff0c;如果vue3不想保持一致#xff0c;必须手动在文件后面添加export..…keepalive没有效果无法缓存页面 问题大概是组件的name值不对应vue2修改组件文件的name值vue3保持组件文件名称和路由页面配置的name一致就可以了如果vue3不想保持一致必须手动在文件后面添加export...如下。 vue3不修改文件名称但实现效果
核心代码和全部代码
script
export default {name: ppidPage
}
/scripttemplatePpidConfig /
/template
script setup
import { onMounted } from vue
import PpidConfig from ./PpidConfig.vue
import { usePpidStore } from /store/operation/ppid.js
const ppidStore usePpidStore()
onMounted(async () {await ppidStore.getAllUnits()
})
/script
script
export default {name: ppidPage
}
/scriptkeepalive文件
templatesection classapp-mainrouter-view v-slot{ Component }transition namefade-transform modeout-inkeep-alive :includecachedViewscomponent :isComponent :keykey //keep-alive/transition/router-view/section
/templatescript setup
import { computed } from vue
import { useTagsViewStore } from /store/tagsView
import { useRoute } from vue-router;
const route useRoute();
const tagsViewStore useTagsViewStore()// 缓存的路由组件名称列表
const cachedViews computed(() {console.log(当前缓存页面:, tagsViewStore.cachedViews)// return tagsViewStore.cachedViewsreturn tagsViewStore.cachedViews.filter(item {if (route.name item !route.meta.keepAlive) { //keepAlive为false不缓存return false;} else {return true;}})
})
/scriptstyle scoped/style
router.js页面配置
{path: ppid-config,permission: Operation.PPID,component: () import(/views/operation/ppid/ppidPage.vue),name: ppidPage,meta: {title: t(route.operation.ppidConfig),keepAlive: true}},
vue3 setup组件的name值无法修改最终的name值会跟文件名称生成一致的。 vue2中可以动态修改组件name值如下位置
script langts
export default {name: User, //修改组件的name值data(){return {}}
}
/scriptvue官网文档说明 其他
存在transition组件的写法
router-view v-slot{ Component } v-show$route.meta.keepAlivetransition namefade-transform modeout-inkeep-alive :includecachedViewscomponent :isComponent :keykey //keep-alive/transition/router-viewrouter-view v-slot{ Component } v-if!$route.meta.keepAlivetransition namefade-transform modeout-incomponent :isComponent :keykey //transition/router-view
相关链接
https://cn.vuejs.org/guide/built-ins/keep-alive.html
vue3 keep-alive include失效问题_router-view template #default{ component, rou-CSDN博客
