So I'm loading some components dynamically like so:
const Page0 = () => import("@/components/pages/tutorial/Pages/Page0")
const Page1 = () => import("@/components/pages/tutorial/Pages/Page1")
There are 10 more pages like this, which will be called depending on the route params.
I was wondering how I would know if a certain Page was loaded, for the purposes of creating a loading screen, and how I would know when it was being switched.
This is how I'm using it altogether.
<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 ?
You can use @hook:mounted
for every component dynamic or not to indicate that the component is loaded.
eg
<component :is="current_page" @hook:mounted="doSomething"></component>
Check codesandbox example
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.