vue.js - [Vue路由器警告] : No match found for location with path

Question

这是我的 app.js 文件，

import "./bootstrap";
import { createApp } from "vue";
import router from "./routes";

import App from "./App.vue";

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

这是我的 route.js 文件，

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

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

export default router;

这是我的 App.vue 文件，

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

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

这就是我的文件的位置，

我猜我已经正确定义了路线。但它在控制台中向我抛出一个错误，显示 [Vue Router warn]: No match found for location with path "/login" 。并且页面无法加载。

Answer 1

I have defined the routes correctly I guess.

快到了。但这不是路线:

{
  route: "/login",
  name: "Login",
  component: Login,
}

这是路径:

{
  path: "/login",
  name: "Login",
  component: Login,
}

参见Getting Started .