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使用

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