vue项目(缓存页面)保持页面状态,点击tag切换后,还能回到之前操作的样子

在Vue项目中，实现页面缓存的方法有很多种，下面介绍一种常用的方式。

首先，在路由配置中，设置需要缓存的页面路由参数"keep-alive"为true。例如：

const router = new VueRouter({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home,
      meta: {
        keepAlive: true  // 设置需要缓存的页面
      }
    },
    // 其他路由配置
  ]
})

接下来，在App.vue文件中，使用<keep-alive>标签将需要缓存的页面包裹起来。例如：

<template>
  <div id="app">
    <router-view v-if="$route.meta.keepAlive || $route.matched.length === 0"/>
    <keep-alive>
      <router-view v-if="!$route.meta.keepAlive && $route.matched.length > 0"/>
    </keep-alive>
  </div>
</template>

这样配置之后，只有设置了"keep-alive"为true的页面会被缓存，在切换路由时，之前操作过的页面会被保持在缓存中，切回来时还能保持之前的状态。

需要注意的是，缓存的页面在刷新页面或关闭浏览器后会被清除，如果需要在刷新或关闭浏览器后还能保持页面状态，可以考虑使用localStorage等前端本地缓存技术将数据保存在本地。