Vue Router报错No match found for path "/login"如何解决

Vue Router 路由规则中定义访问路径的必填字段为path，你的配置里错误使用了route作为字段名，导致框架无法识别你定义的两条路由规则，访问/login时自然找不到匹配项抛出警告。
另外需要额外核对一处导入逻辑：你在app.js中写的路由导入路径是./routes，但你贴出的路由文件名为route.js，如果文件名和导入路径不匹配还会触发模块找不到的报错。

• 修正路由配置的字段名：打开你的路由配置文件，将所有路由项里的route字段替换为path，修正后的完整路由代码如下：

import { createRouter, createWebHistory } from "vue-router";
import App from "./views/Main.vue";
import Login from "./views/Login.vue";

const router = createRouter({
    history: createWebHistory(),
    routes: [
        {
            path: "/",
            name: "Home",
            component: App,
        },
        {
            path: "/login",
            name: "Login",
            component: Login,
        },
    ],
});

export default router;

• 核对路由文件导入路径：如果你的路由文件实际文件名是单数route.js，将app.js中的导入语句修改为import router from "./route"；如果文件名是复数routes.js则无需调整这一步。app.js的正确参考代码如下：

import "./bootstrap";
import { createApp } from "vue";
import router from "./routes"; // 路径需和实际文件名保持一致
import App from "./App.vue";

createApp(App).use(router).mount("#app");

• 你现有的App.vue代码逻辑没有问题，无需修改，参考代码如下：

<template>
    <RouterLink to="/">Home</RouterLink>
    <RouterLink to="/login">Login</RouterLink>
    <RouterView />
</template>

<script setup>
import { RouterLink, RouterView } from "vue-router";
</script>

• 项目目录结构参考：
  

修改完成后重启前端开发服务，再访问/login路径即可正常加载对应页面，控制台警告也会消失。

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