如何实现特定页面路由跳转缓存的业务场景？

  • Z时代
  • 2024-02-22
  • 分类：IT

下面是一段 vue router 的实现

  {
    path: 'father',
    name: 'father',
    // meta: { KeepAlive: true },
    component: () => import('/src/views/father.vue'),
    children: [
      {
        path: 'object/:objectId',
        name: 'wrapperA',
        component: () => import('/src/views/require/components/wrapperA.vue'),
        children: [{
          path: ':A',
          name: 'A',
          component: () => import('/src/views/require/components/A.vue'),
        },
{
          path: ':C',
          name: 'C',
          component: () => import('/src/views/require/components/C.vue'),
        },
        ]
      },
    ]
  },
  {
    path: 'father/B',
    component: () => import('/src/common/B.vue'),
  }

目前 father 路由下还有其他路由，

只有一种情况去缓存 A 页面，就是从 B 页面跳转到 A 页面，其他情况都不会缓存，这种如何实现？

回答：

用keep-alive：

<keep-alive>
  <router-view v-if="$route.meta.KeepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.KeepAlive"></router-view>
router.beforeEach((to, from, next) => {
  if (from.path === '/father/B' && to.name === 'A') {
    to.meta.KeepAlive = true;
  } else {
    to.meta.KeepAlive = false;
  }
  next();
});

回答：

页面入口添加keep-alive

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

在全局路由守卫判断从B页面跳转A页面的情况

router.beforeEach((to, form, next) => {
  if (form.name === 'B' && to.name === 'A') {
    to.meta.keepAlive = true
  } else {
    to.meta.keepAlive = false
  }
  next()
})

以上是 如何实现特定页面路由跳转缓存的业务场景？ 的全部内容， 来源链接： utcz.com/p/935012.html

回到顶部