vue3.0 vue-router4.0 keep-alive保存当前页面数据的正确写法

最新推荐文章于 2024-04-13 11:29:57 发布

道甚夷

最新推荐文章于 2024-04-13 11:29:57 发布

阅读量7.9k

点赞数 8

分类专栏： vue 文章标签： vue.js javascript node.js

本文链接：https://blog.csdn.net/junjiahuang/article/details/108249960

版权

vue 专栏收录该内容

38 篇文章 0 订阅

订阅专栏

版本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>