Vue Router 路由动态缓存组件
<template>
<div id="app">
<keep-alive :include="includedComponents">
<router-view/>
</keep-alive>
</div>
</template>
<script>
export default {
name: 'App',
computed: {
includedComponents() {
// 根据当前路由的meta属性中的keepAlive字段决定缓存哪些组件
const name = this.$route.meta.keepAlive;
return Array.isArray(name) ? name : name ? [name] : [];
}
}
}
</script>这段代码示例展示了如何根据Vue Router的当前路由的meta字段来动态决定哪些组件需要被<keep-alive>包裹以保持其状态。这是一个在单页应用中管理缓存组件状态的常见需求。
评论已关闭