问题出现原因

router.js中注册路由:

{
    path: '/template-allocation',
    name: 'TemplateAllocation',
    meta: { title: '风险任务详情', keepAlive: true },
    component: () =>
      import(
        '../views/template-allocation/index.vue'
      ),
  },

router-view中使用keepAlive缓存组件:

<router-view v-slot="{ Component }" v-if="isShow">
  <div class="child-view">
    <KeepAlive :include="['TemplateAllocation']">
      <component :is="Component"></component>
    </KeepAlive>
  </div>
</router-view>

最后发现并不生效,在大佬的帮助下,才找到原因:
include中使用的name并不是注册的路由的name!!!
而是组件本身的name,记得在vue2中的时候,export default中有个属性可以声明name,但是在vue3中的setup语法糖中,很少关注如何声明name
官网有这么一句话:
在这里插入图片描述
可是我自己在整理目录结构的时候,习惯将目录这样设置:/template-allocation/index.vue,这样就会导致自动生成的name变成了Index!
就会导致keepAliceinclude属性不生效了。

如何查找我们的组件名称呢?

这就要借助一个常用工具Vue Devtools,如下:
在这里插入图片描述
从上图可以看到Index就是我们的组件名字了。

setup中如何设置组件的名字呢?

官网提供了一个defineOptions,可以这么设置:

defineOptions({
  name: 'TemplateAllocation'
})

Vue Devtools可以看到组件名字变成了TemplateAllocation,如下:
在这里插入图片描述
以上就是本次的分享内容了,又踩了一个小坑。奉上当初提问的地址

GitHub 加速计划 / vu / vue
100
18
下载
vuejs/vue: 是一个用于构建用户界面的 JavaScript 框架,具有简洁的语法和丰富的组件库,可以用于开发单页面应用程序和多页面应用程序。
最近提交(Master分支:4 天前 )
9e887079 [skip ci] 10 个月前
73486cb5 * chore: fix link broken Signed-off-by: snoppy <michaleli@foxmail.com> * Update packages/template-compiler/README.md [skip ci] --------- Signed-off-by: snoppy <michaleli@foxmail.com> Co-authored-by: Eduardo San Martin Morote <posva@users.noreply.github.com> 1 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐