怎么实现从A界面跳转到B界面，返回A界面会保留之前的状态

Nikki_u

已于 2022-06-07 22:27:52 修改

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2022-06-07 22:24:23 首次发布

本文链接：https://blog.youkuaiyun.com/Nikki_u/article/details/125174592

本文介绍了如何在Vue应用中使用keep-alive缓存组件，通过设置meta属性标记需要缓存的路由，并在路由出口管理视图加载，实现实时的页面状态保留。通过实例演示了手动测试滑动效果保持不变的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先说解决方案，非常简单。使用keep-alive就可以了。

第一步：在需要缓存的页面路由里面的meta属性里写上keepAlive：true。例如

  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [{
      path: 'dashboard',
      name: 'Dashboard',
      component: () => import('@/views/dashboard/index'),
      meta: { title: 'Dashboard', icon: 'dashboard', keepAlive: true } //++++
    }]
  },

第二步：在路由出口，把需要缓存的用keep-alive进行包裹；把不需要缓存的写在keep-alive外面

这里判断需不需要缓存就是用的路由里面的keepAlive

    <!--缓存的视图-->
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive" />
    </keep-alive>
    <!--不缓存的视图-->
    <router-view v-if="!$route.meta.keepAlive" />

第三步：手动测试

在Dashbord组件里面写非常多行数据，然后滑倒下面，此时可以记住滑动块所处的位置。

点击其他路由，然后点击后退键。

这是会返回到Dashbord组件，并且滑动块所处的位置不会变。