0


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

应用场景

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

解决办法

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

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

具体步骤

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

  1. <keep-alive>
  2. <router-view v-if="$route.meta.keepAlive" class="router-view">
  3. </router-view>
  4. </keep-alive>
  5. <router-view v-if="!$route.meta.keepAlive" class="router-view" ></router-view>

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

  1. {
  2. name: '首页',
  3. path: 'index',
  4. component: Index,
  5. meta: {
  6. keepAlive: true,
  7. isBack: false
  8. }
  9. },

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

  1. beforeRouteEnter(to, from, next) {
  2. if (from.path == "/detail") {
  3. to.meta.isBack = true;
  4. } else {
  5. to.meta.isBack = false;
  6. }
  7. next();
  8. },

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

具体步骤参考$bus使用

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


本文转载自: https://blog.csdn.net/weixin_51958039/article/details/127496291
版权归原作者 我没秃还能写 所有, 如有侵权,请联系我们删除。

“vue单页面实现路由跳转后保留原页面数据”的评论:

还没有评论