我对vue.js很陌生，我也正在使用laravel 8和php 7.24，我想要做的是访问页面而无需重新加载。我已经设置了vue.js，我有两个vue组件，我需要将它们路由到另一个。问题是我可以看到home.vue文件的元素，但是router-link元素不起作用。

app.js文件

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
import routes from './routes';

Vue.use(VueRouter);

const app = new Vue ({
    el: '#app',router: new VueRouter(routes)
});

route.js文件

import home from './components/home.vue';
import example from './components/example.vue';
export default{
    mode: 'history',linkactiveclass: 'font-semibold',routes: [
        {
            path: '/vue',component: home
        },{
            path: '/vue/example',component: example
        }
    ]
}

home.vue文件

<template>
    <router-link to="/vue/example"><a>url to example</a></router-link>
</template>
<script>
export default {
    name : "home"
}
</script>

example.vue文件

<template>
    <router-link to="/vue"><a>Back to the root</a></router-link>
</template>
<script>
export default {
    name : "example"
}
</script>

这是我定义路线的方式（没有它们，页面将不起作用）

Route::get('/vue/{any}',function (){
return view('vue.index');
})->where('any','.*'); ------> // this function doesn't work.
Route::view('/vue','vue.index');

最后是我的索引刀片，我在这里看不到我的组件，你们看到不对吗？

<div id="app"></div>
    <h1>This is a vue component</h1>

<router-link to="/vue/example" exact><div class="button">please send me to another page</div></router-link>
    <script src="{{asset('js/app.js')}}"></script>
    <script src="{{asset('js/routes.js')}}"></script>
    <script src="{{asset('components/example.vue')}}"></script>
    <script src="{{asset('components/home.vue')}}"></script>