2

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

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
        }
    ]
}

主页.vue 文件

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

例子.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>
4

0 回答 0