vue单页面实现路由跳转后保留原页面数据

最新推荐文章于 2025-03-05 23:54:38 发布

我没秃还能写

最新推荐文章于 2025-03-05 23:54:38 发布

阅读量1.3w

点赞数 8

分类专栏： JS 文章标签： 1024程序员节前端 vue.js

本文链接：https://blog.csdn.net/weixin_51958039/article/details/127496291

版权

JS 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了在Vue.js应用中如何利用keep-alive组件进行页面缓存，以在路由跳转后保留页面数据。通过在路由配置中设置meta属性，并在组件内使用beforeRouteEnter钩子函数来判断路由状态。此外，还探讨了组件间通信的方法，如使用eventBus，以在不同组件间传递值。

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

应用场景

有时候在路由跳转后，返回原页面时需要保留之前的数据，即不销毁页面。

解决办法

页面的缓存，需要用到vue的内置组件keep-alive，来缓存列表页面，同时配合路由选项来更改页面的数据。

在设置keep-alive缓存的组件中，首次进入组件，会一次调用组件的钩子函数：created --> mounted -->activated 再次进入时，只触发activated钩子函数

具体步骤

1.在路由出口(APP.vue)渲染组件时配置：

<keep-alive>
      <router-view v-if="$route.meta.keepAlive" class="router-view">
      </router-view>
 </keep-alive>
 <router-view v-if="!$route.meta.keepAlive" class="router-view" ></router-view>

2.在路由选项中，配置meta属性，keepAlive为true即为需要缓存的组件，同时设置isBack属性，用来标示页面是否是从详情页面返回的。

{
     name: '首页',
     path: 'index',
     component: Index,
     meta: {
        keepAlive: true, 
        isBack: false
          }
},

3.在组件实例中，通过beforeRouteEnter(to, from, next)路由守卫，来判断路由是跳转到哪去或者从哪里跳转回来的，则将当前路由对象的meta.isBack 设置为true,否则设为false

beforeRouteEnter(to, from, next) {
        if (from.path == "/detail") {
          to.meta.isBack = true;
        } else {
          to.meta.isBack = false;
        }
        next();
      },

4.实现组件之间的通信，可以使用eventBus，在vue里面可以用vuebus

具体步骤参考$bus使用

该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。但是有可能出现页面销毁导致事件监听失败传不了值。所以用到了上面的方法。