[VUE]解决返回上一页后页面总是刷新问题

Vue项目中，默认的情况，如果某个页面跳转到了下一页，在下页面返回后（$router.go(-1)），上一个页面总是会自动刷新（进入created方法），导致上页面的状态就没有了，这样的方式往往不是我们想要的！

问题解决

可以使用<keep-alive></keep-alive>来解决这个问题，它是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。

在 App.vue里面（组件最开始的地方），有如下代码：

<template>
  <div id="app">
      <router-view></router-view>
  </div>
</template>

改成如下：

<template>
  <div id="app">
    <!-- 缓存的页面，缓存$route.meta.keepAlive为true的组件 -->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 不缓存的页面，不缓存$route.meta.keepAlive为false 或者没有这个 meta 的组件 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

这样，我们只要在路由的设置里，加上 meta 就可以让这个页面在跳到其他页面返回后，保持状态了：

{
    path: '/xxlist',
    name: 'MyList',
    title: '某某列表页面',
    component: () => import('@/views/MyList.vue'),
    meta: {
      keepAlive: true // 下一页返回后，不要刷新，不触发created
    }
  }