vue小记——保持历史页面数据不变，实现返回后不重置数据

在Vue 2中，如果希望在用户导航到其他页面后再返回时保持历史页面的数据不变，可以使用<keep-alive>组件来实现

以下是如何使用<keep-alive>来保持历史页面数据不变的方法：

1. 在路由视图组件外包裹<keep-alive>：

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

这样，所有通过<router-view>渲染的组件都会被<keep-alive>缓存，除非它们被<transition>或<router-view>的v-if/v-else等条件语句包裹。

1. 使用include或exclude属性来精细控制缓存：

如果您只想缓存特定的组件，可以使用include或exclude属性来指定哪些组件应该被缓存。

<keep-alive include="Home,About">
  <router-view></router-view>
</keep-alive>

或者：

<keep-alive exclude="Detail">
  <router-view></router-view>
</keep-alive>