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

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

一：在app.vue中添加keep-alive标签。

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive" />
  </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()

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

推荐链接