php - Vue router-link does not open the page

I am working with vue3 and php. But somehow my does not open the page. Here is my code: app.js

import BootstrapVue3 from "bootstrap-vue-3";
import '../assets/sass/app.scss';

window.Vue = require('vue');

import { createApp } from 'vue';
import App from './App.vue';

import router from './routes.js';

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

routes.js

import * as VueRouter from 'vue-router'
import {createRouter, createWebHistory} from 'vue-router';

import App from './App.vue';
import Post from './pages/Post.vue';

const routes=[
    {
        path: '/',
        name: 'home',
        component: App
    },
    {
        path: '/post',
        name: 'post',
        component: Post
    },
    ]
    
    const router = VueRouter.createRouter({
       history: VueRouter.createWebHashHistory(),
       routes,
    })
export default router;

Header.vue

 <ul class="">
 <li class="">
    <router-link to="/" v-on:click="">Home</router-link>
 </li>
 <li class="">
    <router-link to="/post" v-on:click="">Post</router-link>
  </li>             
</ul>

web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/{any?}', [
    function () {
        return view('app');
    }
])->where('any', '.*');

I think the problem is how i connected php and vue routers. Does anyone knows what i am doing wrong? And where should i place file routes.js? I tried to place it in routers folder next to web.php and in resources folder. But both do not work

Answer

Solution:

// Header.vue
 <ul class="">
   <li class="">
     <router-link to="/">Home</router-link>
   </li>
   <li class="">
     <router-link to="/post">Post</router-link>
   </li>             
 </ul>

Do not use @click with router-link

Source