Vue.js项目出现‘Invalid route component’错误，请求排查与解决

问题根源 #

你的路由配置里，component字段被赋值为字符串"Home"，但Vue Router要求该字段必须传入组件对象，而非字符串。你已经正确导入了Home组件，却没有直接使用这个变量。

修复方案 #

修改路由配置文件中的component值，将字符串"Home"替换为导入的Home变量：

import { createRouter, createWebHistory } from "vue-router";
import Home from '../views/Home.vue' 
const routes = [
  {
    path: "/",
    name: "home",
    component: Home, // 去掉引号，直接使用导入的组件对象
  },
];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

验证说明 #

• 导入的Home是从../views/Home.vue加载的组件实例，完全符合Vue Router对路由组件的要求
• 你的App.vue、main.js、Home.vue代码均无问题，修复路由配置后即可正常渲染页面

内容的提问来源于stack exchange，提问作者JeRmiZa