Vue路由器不呈現/掛載根路徑組件

Question

我正在用vue ， vue-router和laravel制作一個頁面，問題是，當我在localhost/myproject/public_html/輸入時，如果我單擊指向服務的路由器鏈接，則無法在router-view呈現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>

這是我的Home.vue

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

這是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>

那么我該如何解決呢？ 如果我以任何路線重新加載頁面，則應該安裝該component ，但是不會在vue路由器中顯示該component ，因此不會安裝該component 。

編輯：

根據要求，在App.vue中，日志為/myproject/public_html/

Answer 1

我以前從未使用過Laravel，但我認為您正在尋找base 。

Vue文檔：

• 類型：字符串
• 默認值：“ /”
  
  應用程序的基本URL。 例如，如果整個單頁應用程序在/ app /下提供，則base應使用值“ / app /”。

由於您要在localhost/myproject/public_html/服務項目，因此vue看到的是/myproject/public_html/而不是/ 。

您可以通過將基本路由添加到vue-router構造函數來更改此設置。

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