版本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更新:

  • 嵌套缓存路由
  • 动态缓存路由增减
  • 过渡动画
Logo

前往低代码交流专区

更多推荐