Vue-роутер не работает должным образом

Я установил vue-router с узлом.
Это мой проект URL http://localhost/UserApp/public,

И два маршрута VU я использовал /home & /about
Поэтому, когда я нажимаю на домашние маршруты. это перенаправляет меня на http://localhost/home
но это должно быть http://localhost/UserApp/public/home,
Поэтому, когда я перезагружаю страницу. это бросает object not found Ошибка. Как нет такого маршрута, как http://localhost/home,
Как мне решить проблему?

app.js

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)

const routes = [
{ path: '/home', component: Home },
{ path: '/about', component: About }
]

const router = new VueRouter({
mode : 'history',
routes // short for `routes: routes`
})

web.php

Route::get('/{name}',function(){
return redirect('/');
})->where('name','[A-Za-z]+');

Myheader.vue

<router-link to="/home" class="navbar-item">Home</router-link>
<router-link to="/about" class="navbar-item">About</router-link>