vue单页面实现路由跳转后保留原页面数据-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue单页面实现路由跳转后保留原页面数据。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

应用场景

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

解决办法

页面的缓存，需要用到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使用

该步骤可以让一个组件里的值传到另一个组件里，不需要父子关系。但是有可能出现页面销毁导致事件监听失败传不了值。所以用到了上面的方法。文章来源地址https://www.toymoban.com/news/detail-550017.html

到了这里，关于vue单页面实现路由跳转后保留原页面数据的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！