Vue路由器-链接不打开页面。

Question

我正在使用vue3和php。但不知何故我没有打开这一页。这是我的代码：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', '.*');

我认为问题在于我如何连接php和vue路由器。有人知道我做错了什么吗？我应该把文件routes.js放在哪里呢？我试着把它放在web.php旁边的路由器文件夹和资源文件夹中。但两者都不起作用

Answer 1

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

不要在路由器链接中使用@click