Vue3 router-view keep-alive
2022-06-08 本文已影响0人
i0S_毛_宇
- 从一个页面跳转另个页面，再返回，第一个页面会重新渲染，如何能不渲染呢？也就用到了keep-alive。
Vue3 用法
-
keep-alive属性“include，exclude”的使用
-
注意：使用include，exclude 属性需要给所有vue类的name赋值，否则 include，exclude将不生效
-
include 值为字符串或者正则表达式匹配的组件name不会被销毁。
-
exclude 值为字符串或正则表达式匹配的组件name会被销毁。
-
-
例子如下：name为playView的界面，
router.push()新界面时，它不会被unmount掉；从新界面history.back()也不会重新渲染，不会执行setup()
<router-view v-slot="{ Component }">
<transition>
<keep-alive include="playView">
<component :is="Component" />
</keep-alive>
</transition>
</router-view>
Vue2 用法
<keep-alive>
<router-view />
</keep-alive>
