vue3切换页面时阻止页面的销毁和重新创建（缓存页面）

当我们切换页面时页面会被销毁，重新切换回来时会被创建

如图

 

 

 当我们切换时

 

 

 在原来Vue2上面缓存组件原来是这样写的在app.vue里

 

 

 这样写在Vue3里是不会生效的，可以查看页面

 

 

 我们必须使用新的插槽方式来使用缓存 页面功能

<router-view v-slot="{ Component }">
  <transition>
    <keep-alive>
      <component :is="Component"></component>
    </keep-alive>
  </transition>
</router-view>

然后在各个导航页面里写入

 

 

 打印就会发现第一次只会打印”组件被创建“没有销毁

 

 

 如果我不想全部被缓存，要About页面单独不被缓存

App.vue页面上加入exclude写上你要取消缓存的页面名字，

 

 

 注意这个名字不是index路由里的名字

是你这里的名字

 

 

 如果要多个页面不缓存可在exclude=”名字,名字“

 使用逗号

 

 

这里我如果想要一个效果，我点击一个页面的某个路径了，我切换了页面之后点回来希望还是那个路径

就可以在页面守卫里使用，判断他是否离开了当前页面，如果是就把这路径给data详情见截图