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