Vue.js routes does not work using router-link-CodePudding

i make a project using vue js. in the nav bar i put menu home and about which is will go direct to each page when it's clicked. there is no error when i run the project but the router doesn't work when i clicked the menu.

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './routes'

import './assets/main.css'

createApp(App).use(router).mount('#app')

routes.js

import { createWebHistory, createRouter } from "vue-router";
import Home from '@/components/Home.vue';
import AboutMe from '@/components/AboutMe.vue';

const routes = [
    {
        name: 'Home',
        path: '/',
        component: Home
    },
    {
        name: 'AboutMe',
        path: '/aboutme',
        component: AboutMe
    }
]

const router = createRouter({
    history: createWebHistory(),
    routes
})


export default router;

app.vue

<div  id="app">
      <img src="./assets/Logo.svg" alt="Logo">
      <div >
        <router-link to="/" >HOME</router-link>
        <router-link to="/aboutme" >ABOUT ME</router-link>  
      </div>
    </div>

CodePudding user response：

You missed to add <router-view/>

add it on your app.vue file after the nav section. Example:

      <div >
        <router-link to="/" >HOME</router-link>
        <router-link to="/aboutme" >ABOUT ME</router-link>  
      </div>
      <router-view/>