Currently, I am dynamically loading various components in this manner:
const Page0 = () => import("@/components/pages/tutorial/Pages/Page0")
const Page1 = () => import("@/components/pages/tutorial/Pages/Page1")
There are additional pages similar to this one, which will be determined based on the route parameters.
I am curious about how to detect when a specific page has finished loading so that I can display a loading screen, and also how to know when there is a switch between pages.
This is how everything comes together:
<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>