所以我像这样动态地加载一些组件:
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>
您可以
@hook:mounted
为每个组件动态使用或不使用它来指示该组件已加载。例如
校验码和框示例