vue2跳转页面缓存

在 Vue 2 中，当你导航到不同的页面（通常是通过 Vue Router）时，默认情况下，Vue 会销毁当前组件的实例，并在导航回该页面时重新创建它。这意味着组件的状态（如数据、计算属性、方法等）将会丢失，除非你在路由配置中使用了某种形式的缓存。

1.使用 <keep-alive> 包裹路由视图

<keep-alive> 是 Vue 提供的一个内置组件，它可以缓存不活动的组件实例，而不是销毁它们。你可以将 <router-view> 包裹在 <keep-alive> 中，以便缓存路由组件。

     <div class="right">
         <el-main>
            <keep-alive>
            <!-- 需要缓存的视图组件 -->
              <router-view v-if="$route.meta.keepAlive && isShow">
              </router-view>
            </keep-alive>
            ​
            <!-- 不需要缓存的视图组件 -->
            <router-view v-if="!$route.meta.keepAlive && isShow">
            </router-view>


            <!--<router-view v-if="isShow"/>-->

          </el-main>
      </div>

2.在路由配置中使用 meta 字段

const router = new VueRouter({  
  routes: [  
    {  
      path: '/foo',  
      component: Foo,  
      meta: { 
               keepAlive: true // 表示这个路由需要被缓存
      }   
    },  
    // ... 其他路由  
  ]  
});