Vue (H5)跳转到新页面再返回到旧页面保持状态不变(keep-alive)

新项目中遇到了A页面跳转到B页面用户填写并收集数据相关数据成功返回到A页面时，A页面被重置刷新，所有已经填写的其他数据均没了的问题，为了解决这个问题，我们不得不使用以下方案解决问题：

页面路由如下：

A页面：path: '/home',

B页面：path: '/info',

解决方案：使用keep-alive

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

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

<script>
export default {};
</script>

     2.在router文件下的index.js中，添加meta节点并新增keepAlive:true

//router/index.js
export const constantRoutes = [
  {
    path: "/",
    redirect: '/home',
    component: () => import("@/views/home.vue"),
  },
  {
    path: "/home",
    component: () => import("@/views/home.vue"),
    meta: { keepAlive: true }
  },
  {
    path: "/info",
    component: () => import("@/views/info.vue"),
    meta: { keepAlive: true }
  },
];

   3.在B页面（/info）中添加：

//info.vue
beforeRouteLeave(to,form,next){
    to.meta.keepAlive = true;
    next(0)
  },

搞定~

 

 --End--