Javascript Vue路由器不呈现/装载根路径组件

我正在用

vue

、

vue router

和

laravel

制作一个页面，问题是，当我进入

localhost/myproject/public\u html/

时，

Home

组件不会在

路由器视图中呈现，如果我点击路由器链接到服务组件，它会正常呈现内容，当我单击主路径时，它会呈现主组件内容，那么为什么会发生这种情况呢？这是我的
app.js
结构

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

import App from './views/App'
import Home from './views/Home'
import Service from './views/Service'
const router = new VueRouter({
    mode: 'history',
    routes: [
        {
            path: '/',
            name: 'home',
            component: Home
        },
        {
            path: 'servicios',
            'name' : 'services',
            component: Service
        }
    ],
});
const app = new Vue({
    el: '#app',
    components : { App },
    router,
});

这是我的App.vue

<template>
    <div>
        Hola

        <router-link :to="{ name : 'services' }">
            ir a servicios
        </router-link>

        <router-view>
        </router-view>
    </div>
</template>
<script>
    import PageLogo from '../components/PageLogo'
    import Loading from '../components/Loading'
    export default {
        mounted : function(){
            console.log(this.$router.currentRoute.path)

        },
        components : {
            'page-logo' : PageLogo,
            'loading' : Loading
        },
        methods : {
            ajaxOver : function() {

            }
        }
    }
</script>


赫拉
ir a servicios
从“../components/PageLogo”导入PageLogo
从“../components/Loading”导入加载
导出默认值{
挂载：函数（）{
console.log（此.router.currentRoute.path）
},
组成部分：{
“页面徽标”：页面徽标，
“加载”：加载
},
方法：{
ajaxOver:function（）{
}
}
}

这是我的家

<template>
    <div class="row">
        Home page
        <router-link :to="{ name : 'services' }">
            go to services
        </router-link>
    </div>
</template>
<script>
    export default {
        mounted: function() {
            console.log('hola')
        }
    }
</script>


主页
服务
导出默认值{
挂载：函数（）{
console.log（'hola'）
}
}

这是Service.vue

<template>
    <div>
        Services page

        <router-link :to="{ name : 'home' }">
            go to home
        </router-link>
    </div>
</template>

<script>
    export default {
        mounted : function(){
            console.log('services')
        }
    }
</script>


服务页面
回家
导出默认值{
挂载：函数（）{
console.log（“服务”）
}
}




那么我该如何解决这个问题呢？如果在任何路由中重新加载页面，则应安装
组件
，但在vue路由器中未显示，因此未安装
组件

编辑：

根据要求，App.vue中的日志是
/myproject/public\u html/
我以前从未使用过Laravel，但我想您正在寻找

Vue文档：


类型：字符串
默认值：“/”


应用程序的基本URL。例如，如果在/app/下提供整个单页应用程序，则base应使用值“/app/”

由于您在
localhost/myproject/public\u html/
上提供项目，vue看到的是
/myproject/public\u html/
，而不是
/

您可以通过将基本路由添加到vue路由器构造函数来更改此设置

const router = new VueRouter({
    mode: 'history',
    base: '/myproject/public_html/',
    ...
}

你好。你能在App.vue中的mounted中记录
this.$router.currentRoute.path的输出吗？此外，Home的路径应该是“/”而不是“/”，对吗？编辑了路由，并记录了此路径。$router.currentRoute.path