Open mileOfSunshine opened 2 years ago
大佬们, vue3用到keepalive页面缓存失效,有解决办法吗?
大佬们, vue3用到keepalive页面缓存失效,有解决办法吗?
不知你属于哪种失效情况,可参考我的文章:看keep-alive如何在项目中失效
在 <script setup>
中要使用动态组件的时候,:is
绑定值不能是字符串,必须是组件变量。
<template>
<component :is="Foo" />
<component :is="`foo`" /> <!-- 不行 -->
<component :is="someCondition ? Foo : Bar" />
</template>
<script setup>
import Foo from './Foo.vue'
import Bar from './Bar.vue'
</script>
如何解决业务中遇到 :is
绑定值为字符串的情景?
解决方案1:在普通script中局部注册组件
<template>
<component :is="`foo`" /> <!-- 通过了 -->
</template>
<script>
import Foo from './Foo.vue'
export default {
components: { Foo }
}
</script>
<script setup>
。。。
</script>
解决方案2:全局注册 Foo 组件
Vue3 优势
Vue3 Composition API & Vue2 Options API
keep-alive
vue2写法:
vue3写法:
借助空组件(如下)实现嵌套路由会造成路由缓存失效。