Vue router does not render/mount root path component

Question

i am making a page with vue, vue-router and laravel, the problem, when i enter in localhost/myproject/public_html/, the Home component is not rendered in the router-view, if i click in the router link to the Service component, it render the content normally, and when i click to the home path it render the home component content, so why this happens? this is my app.js structure

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,
});

this is my 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>

this is my 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>

and this is 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>

so how can i solve this? if i reload the page in any route, the component should be mounted, but in the vue router is not being displayed, so the component is not mounted.

Edit:

As requested, in App.vue the log is /myproject/public_html/

Hi again. Can you log the output of this.$router.currentRoute.path in mounted in App.vue? Also, the path for Home is meant to be '/' not './', right? — Adam Piziak

Adam Piziak Adam Piziak · Accepted Answer · 2018-07-18T01:07:04

I've never used Laravel before, but I think you're looking for base.

Vue docs:

type: string

default: "/"

The base URL of the app. For example, if the entire single page application is served under /app/, then base should use the value "/app/".

Since you're serving your project at localhost/myproject/public_html/, vue is seeing /myproject/public_html/ instead of /.

You can change this by adding the base route to the vue-router constructor.

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

Vue router does not render/mount root path component

1 Answers