所以我像这样动态加载一些组件:
const Page0 = () => import("@/components/pages/tutorial/Pages/Page0")
const Page1 = () => import("@/components/pages/tutorial/Pages/Page1")
还有10个这样的页面,将根据路由参数调用。
我想知道我如何知道某个页面是否已加载,以创建加载屏幕,以及我如何知道它何时被切换。
这就是我完全使用它的方式。
<template>
<div>
<component :is="current_page"></component>
</div>
</template>
<script>
const Page0 = () => import("@/components/pages/tutorial/Pages/Page0/index.vue")
const Page1 = () => import("@/components/pages/tutorial/Pages/Page1/index.vue")
export default {
scrollToTop:
true,
components:
{
Page0,
Page1,
},
computed:
{
current_page ()
{
return "Page" + this.page
}
},
asyncData ({
route, store, env, params, query, req, res, redirect, error
})
{
return {
page:
params.page
}
}
}
</script>
最佳答案
how to know when dynamic component has fully loaded ?
您可以使用@hook:mounted
为每个动态或非动态组件 指示组件已加载。
例如
<component :is="current_page" @hook:mounted="doSomething"></component>
关于javascript - 如何知道动态组件何时完全加载,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56591941/