vue3 路由多层嵌套 keepalive 不生效

山橘满月

已于 2022-06-13 09:47:17 修改

阅读量3.8k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript

于 2022-06-11 08:39:05 首次发布

本文链接：https://blog.csdn.net/weixin_51102356/article/details/125230978

版权

vue 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

app.vue

   <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component" :key="$route.name"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive"/>
  </router-view>

避免出现如下页面跳转错误，需要加key区分

router.js

例如：特别多层的嵌套，要缓存 F 页面，设置 keepAlive: true

 {
    path: '/A',
    name: 'A',
    meta: { isAuth: false, title: 'A' },
    component: () => import('@/views/A.vue'),
    children: [
    {
      path: 'C',
      name: 'C',
      meta: { isAuth: false, title: '' },
      component: () => import('@/views/C.vue'),
      children: [
        {
          path: 'E',
          name: 'E',
          meta: { isAuth: false, title: '' },
          component: () => import('@/views/E.vue'),
          redirect: { name: 'F' },
          children: [
            {
              path: 'F',
              name: 'F',
              meta: { isAuth: false, title: '',keepAlive: true  },
              component: () => import('@/views/F.vue'),
            },

因为是通过 E 页面重定向到 F ，E 页面的 router-view 也要写成这样，keepalive 才有用

<router-view v-slot="{ Component }">
   <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
   </keep-alive>
   <component :is="Component"  v-if="!$route.meta.keepAlive"/>
</router-view>

亲测有效