vue移动端跳转到下一页，返回上一页面数据保留

使用keep-alive

1、在项目的app.vue文件中添加keep-alive

<template>
  <div id="app">
    <!-- <router-view/> -->
    <!--缓存想要缓存的页面，实现后退不刷新-->
    <!--加上v-if的判断，可以自定义想要缓存的组件，自定义在router里面-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

2、在router文件夹下的index.js文件中，添加mate

{
   path: '/',
   name: 'index',
   component: index,
   meta: {
     keepAlive: true,
   },
},

3、在跳转的新页面中，添加beforeRouteLeave，位置与methods同级

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

Tips：虽然上面的方法解决的缓存页面的问题，但是A->B页面，B页面数据被缓存，当从C->B时候，之前的页面还是处于缓存状态，所以需要B返回A的时候，页面进行强制刷新，从而清除keepAlive缓存

<template>
    <div id="app">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

<script>
export default {
  watch: {
    $route(to, from) {
      if (to.name === "Home" && from.name) {
        this.$router.go(0);
      }
    },
  },
};
</script>