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>
1
2
3
4
5
6
7
8
9
10
11

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

{
   path: '/',
   name: 'index',
   component: index,
   meta: {
     keepAlive: true,
   },
},
1
2
3
4
5
6
7
8

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

beforeRouteLeave(to,from,next){
  to.meta.keepAlive = true
  next(0)
},
methods:{}
1
2
3
4
5