Este proyecto utiliza Vue 3 y Laravel 8 .

Quiero usar vue-router para la single page navigation sin cargar nuevos componentes y, en su lugar, solo usar los router-links para desplazarme a sections similares a cómo funcionan las etiquetas de anchor :

 <router-link :to="{ hash: '#home' }">Home</router-link>

En Vue 2 pude hacerlo simplemente eliminando el atributo del component de una route pero en Vue 3 obtengo estos errores en la consola del navegador cuando hago eso:

 [Vue Router warn]: Component "default" in record with path "/" is not a valid component. Received "undefined". [Vue Router warn]: uncaught error during route navigation: app.js:40900 Error: Invalid route component at extractComponentsGuards (app.js:42803) at app.js:43926 [Vue Router warn]: Unexpected error when starting the router: Error: Invalid route component at extractComponentsGuards (app.js:42803) at app.js:43926

router.js :

 import { createWebHistory, createRouter } from "vue-router"; import Home from "../vue/views/home"; import About from "../vue/views/about"; const router = createRouter({ history: createWebHistory(), routes: [ {path: "/", name: "home", component: Home}, {path: "/about", name: "about", component: About}, ], scrollBehavior(to, from, savedPosition) { if (to.hash) { return window.scrollTo({ top: document.querySelector(to.hash).offsetTop, behavior: 'smooth' }); } return window.scrollTo({ top: 0, behavior: 'smooth' }); } }); export default router;

Cuando no elimino el atributo del component de una route así:

 {path: "/", name: "home"}

el componente de home se carga dos veces y se superpone debajo del componente de home o se muestra al final de la página.

¿Cómo puedo evitar eso y simplemente usar la funcionalidad de desplazamiento?