Estoy tratando de cargar de forma diferida un componente de inicio de sesión, pero después de usar <Suspense> y <template> con el valor predeterminado y la devolución de llamada. Funciona normalmente, pero después de que se carga el componente, el componente de carga no se va.
Aquí está mi código router.js:
import { createWebHistory, createRouter } from 'vue-router' const Login = () => { return new Promise((resolve) => { setTimeout(() => { resolve( import ('./components/pages/auth/Login'), ) }, 1000) }) } const Register = () => { return new Promise((resolve) => { setTimeout(() => { resolve( import ('./components/pages/auth/Register'), ) }, 1000) }) } const routes = [{ path: '/login', name: 'login', component: Login, }, { path: '/register', name: 'register', component: Register, } ] const router = createRouter({ history: createWebHistory(), routes: routes }) export default routerApp.vue es mi archivo de componente raíz que se muestra a continuación:
<template> <div> <Suspense> <template #default> <RouterView /> </template> <template #fallback> <div> <h1>Loading....</h1> </div> </template> </Suspense> </div> </template> <script> export default { components: { } } </script> <style scoped> div { height: 100%; width: 100%; background-color: black; } h1 { font-size: 30px; font-weight: bold; color: white; } </style>A continuación se muestra el resultado que obtengo: el fondo negro es la carga que se supone que no debe estar allí después de que se haya cargado el componente. Haga clic para ver la imagen
De acuerdo con los documentos oficiales , todo lo que necesita es pasar una función con importación dinámica dentro:
// replace // import UserDetails from './views/UserDetails' // with const UserDetails = () => import('./views/UserDetails') const router = createRouter({ // ... routes: [{ path: '/users/:id', component: UserDetails }], })