Vue 路由器不渲染/挂载根路径组件答案

【问题标题】：Vue router does not render/mount root path componentVue 路由器不渲染/挂载根路径组件
【发布时间】：2018-12-25 17:24:46
【问题描述】：

我正在使用vue、vue-router 和laravel 创建一个页面，问题是，当我输入localhost/myproject/public_html/ 时，Home 组件不会在router-view 中呈现，如果我点击路由器链接到服务组件，它正常呈现内容，当我单击主路径时，它呈现主组件内容，为什么会发生这种情况？这是我的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没有挂载。

编辑：

根据要求，在 App.vue 中，日志为 /myproject/public_html/

【问题讨论】：

你好。你能在 App.vue 中挂载 this.$router.currentRoute.path 的输出吗？另外，Home 的路径应该是 '/' 而不是 './'，对吧？
编辑了路由，并记录了这个。$router.currentRoute.path

标签： javascript vue.js vue-router

【解决方案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/',
    ...
}

【讨论】：