vue3.0 vue-router4.0 keep-alive保存当前页面数据的正确写法
版本1@vue/cli 4.4.1“vue”: “^2.6.11”,“vue-router”: “^3.2.0”,<keep-alive><router-view v-if="$route.meta.alive"></router-view></keep-alive>版本2@vue/cli 4.2.0“vue”: “^2.6.11”“vue-rout
·
版本1
@vue/cli 4.4.1
“vue”: “^2.6.11”,
“vue-router”: “^3.2.0”,
<keep-alive>
<router-view v-if="$route.meta.alive"></router-view>
</keep-alive>
版本2
@vue/cli 4.2.0
“vue”: “^2.6.11”
“vue-router”: “^3.1.5”
<template v-if="$route.meta.alive">
<router-view keep-alive />
</template>
<template v-else>
<router-view />
</template>
版本3
@vue/cli 4.5.4
“vue”: “^3.0.0-0”
“vue-router”: “^4.0.0-0”
上面的写法会报错:
<router-view> can no longer be used directly inside <transition> or <keep-alive>
<router-view v-slot="{ Component }">
<keep-alive include="Home,News">
<component class="view" :is="Component" />
</keep-alive>
</router-view>
附上demo
demo更新:
- 嵌套缓存路由
- 动态缓存路由增减
- 过渡动画
更多推荐
已为社区贡献7条内容
所有评论(0)