无法解析组件 <router-view> VueRouter

Question

我有一个使用 Vue.js 3.2.13 和 Vue-Router 4.0.14 构建的项目。我想我做的一切都正确，但浏览器引发错误“[Vue warn]：无法解析组件：router-view 如果这是本机自定义元素，请确保通过 compilerOptions.isCustomElement 将其从组件解析中排除。在“

我的 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;

我的main.js文件；

import { createApp } from "vue";
import App from "./App.vue";


import { router } from "./router";


createApp(App).component("fa", FontAwesomeIcon).use(router).mount("#app");

另外App.vue:

<template>
  <div id="app">
    <HeaderNavbar />
    <router-view></router-view>
  </div>
</template>

当我运行项目时，我在浏览器控制台上收到警告：

[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.

Answer 1

您遇到的问题是从 router.js 中将 router 导出为 default，但将其导入为 main.js 中的命名导入。

因此，替换

import { router } from "./router"; // ❌

和

import router from "./router"; //

将使 VueRouter 按预期工作。（我怀疑路由目前在您的项目中有效。它不应该。）

或者，将 router 的命名导出添加到 router.js（并在 main.js 中保留当前的导入语法）也会使问题消失。
您可以通过在该文件中的 const router = createRouter(/* etc... */ 前面添加 export 来实现。如果这样做，export default router 将过时（未使用）。

无法解析组件 <router-view> VueRouter

Failed to resolve component <router-view> VueRouter

javascript

vue.js

vue-router

vuejs3

vue-router4