vue.js - 如何在 VueRouter@4.0.0 (Vue3) 中使用 createAsyncComponent?
问题描述
当我这样填写component
字段时createRouter()
:
{
path: '/article/post',
name: 'article-post',
component: defineAsyncComponent({
loader: () => import('@/views/article-post/index.vue'),
loadingComponent: () => import('@/views/article-post/skeleton.vue'),
}),
},
好像它不起作用。我希望它在实际页面加载时显示加载页面。
我怎么做?
解决方案
该loadingComponent
值必须是组件定义,并且本身不能是异步组件:
import { createRouter } from 'vue-router'
import { defineAsyncComponent } from 'vue'
import Skeleton from '@/views/article-post/skeleton.vue'
export default createRouter({
routes: [
{
path: '/article/post',
name: 'article-post',
component: defineAsyncComponent({
loader: () => import('@/views/article-post/index.vue'),
//loadingComponent: () => import('@/views/article-post/skeleton.vue'), ❌ cannot be dynamic import
loadingComponent: Skeleton ✅
}),
},
]
})
另请注意,加载组件 ( Skeleton
) 仅显示一次,即,如果组件定义尚未在缓存中。这个Codesandbox添加了一个人为的延迟loader()
来演示。
推荐阅读
- vim - 在 vim 状态行中显示用户
- python - Python: How to use values from divmod in a subsequent subtraction
- python - 切片多维数组,索引问题
- ant - 无法在 ubuntu 上安装 Ant
- r - 用元数据编码的 R 数据结构
- google-sheets - Google 表格 - 来自其他表格的条件格式
- ios - 如何在 Swift 的完成处理程序中返回布尔值
- javascript - 在 Adobe Premiere 中分析应用了变形稳定器的剪辑(jsx、ExtendScript)
- python - python中两个向量的优化
- php - PDO 预期数组在网页上仅返回布尔值 1