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

【问题标题】：Failed to resolve component <router-view> VueRouter无法解析组件 <router-view> VueRouter
【发布时间】：2022-07-04 21:45:42
【问题描述】：

我有一个使用Vue.js 3.2.13 和Vue-Router 4.0.14 构建的项目。我认为我做的一切都是正确的，但浏览器会引发错误“[Vue 警告]：无法解析组件：路由器视图如果这是本机自定义元素，请确保通过 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.

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案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 将过时（未使用）。

【讨论】：