[Vue Router warn]: No match found for location with path-CodePudding

This is my app.js file,

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

import App from "./App.vue";

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

This is my route.js file,

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;

This is my App.vue file,

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

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

This is how my files are located,

I have defined the routes correctly I guess. But it throws me an error in the console saying,[Vue Router warn]: No match found for location with path "/login" . And the page doesn't load.

CodePudding user response：

I have defined the routes correctly I guess.

Almost there. But it's not route:

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

It's path:

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

See Getting Started.