Tengo una compilación de proyecto con Vue.js 3.2.13 y Vue-Router 4.0.14 . Creo que hago todo bien, pero el navegador genera un error "[Advertencia de Vue]: no se pudo resolver el componente: vista del enrutador. Si se trata de un elemento personalizado nativo, asegúrese de excluirlo de la resolución del componente a través de compilerOptions.isCustomElement. en "
Mi archivo router.js :
import { createRouter, createWebHistory } from "vue-router"; const routes = [ { path: "/", name: "index", component: () => import("@/views/HomePage.vue"), }, { path: "/signin", name: "signin", component: () => import("@/views/SignIn.vue"), }, { path: "/signup", name: "signup", component: () => import("@/views/SignUp.vue"), }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; Mi archivo main.js ;
import { createApp } from "vue"; import App from "./App.vue"; import { router } from "./router"; createApp(App).component("fa", FontAwesomeIcon).use(router).mount("#app");Además App.vue:
<template> <div id="app"> <HeaderNavbar /> <router-view></router-view> </div> </template>Cuando ejecuto el proyecto, aparece la advertencia en la consola del navegador:
[Vue warn]: Failed to resolve component: router-view If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.El problema en su caso es exportar el router por default desde router.js pero importarlo como importación con nombre en main.js
Por lo tanto, reemplazando
import { router } from "./router"; // ❌con
import router from "./router"; // 👍hará que VueRouter funcione como se esperaba. (Dudo que el enrutamiento funcione actualmente en su proyecto. No debería).
Alternativamente, agregar una exportación con nombre de router a router.js (y mantener la sintaxis de importación actual en main.js ) también resolvería el problema.
Puede hacerlo agregando export delante de const router = createRouter(/* etc... */ , en ese archivo. Si hace esto, export default router se vuelve obsoleto (sin usar).