vue3.0 keep-alive 路由跳转之后保留当前页面数据不变动

需求：
1：页面一数据由接口返回，修改部分数据，
2：数据仅前端页面调整，暂未提交修改数据库。
3：页面一跳转页面二，再由页面二返回页面一
4：页面一数据仍为修改后的数据
实现：
1：借用方式：keep-alive
2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染
3：vue3keep-alive使用vue2的写法，切换路由后当前页面数据依旧改变

一：在vue.app中添加keep-alive标签（此处与vue2不同）。

<template>
  <div id="app">
    <router-view v-slot="{ Component }" v-show="$route.meta.keepAlive">
      <keep-alive>
        <component :is="Component"/>
      </keep-alive>
    </router-view>
    <router-view v-show="!$route.meta.keepAlive" />
  </div>
</template>
<!-- vue3.0配置2 -->
<template>
  <div id="app">
	 <router-view v-slot="{ Component }">
	   <keep-alive>
	     <component :is="Component"  v-if="$route.meta.keepAlive"/>
	   </keep-alive>
	   <component :is="Component"  v-if="!$route.meta.keepAlive"/>
	 </router-view> 
  </div>
</template>

二：在router文件下的相关路由中，添加meta。

 {
      path: '/demo',
      name: 'demo',
      component: demo,
      meta:{
          keepAlive:true // 需要缓存
      }
    },

三：在页面二中进行配置

方法一: 在页面二中，添加beforeRouteLeave

所有从当前页面返回上一页面的方式

 beforeRouteLeave(to,from,next){
   to.meta.keepAlive = true
   next(0)
 }

方法二: 在页面二中，返回跳转按钮方法初修改路由返回方式

通过某按钮返回的方式

 // oldCode:不生效
 this.$router.go(-1)
 // newCode：改为
 this.$router.back()

vue2.0路由跳转之后保留当前页面数据不变动相关文档

推荐链接