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

Question

下面是一段 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 页面，其他情况都不会缓存，这种如何实现？

Answer 1

页面入口添加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()})

Answer 2

用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();});