I am currently working on a webpage using vue, vue-router, and laravel. I have encountered an issue where the Home component is not being rendered in the router-view when I access localhost/myproject/public_html/. However, if I click on the router link to the Service component, the content renders normally. Similarly, clicking on the home path will render the home component content. Why is this happening? Below 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,
});
Here is the App.vue file:
<template>
<div>
Hello
<router-link :to="{ name : 'services' }">
Go to services
</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>
The Home.vue file looks like this:
<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('Hello')
}
}
</script>
Lastly, here is the Service.vue file:
<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>
Please see the following images for visual reference: https://i.stack.imgur.com/jIBiI.png https://i.stack.imgur.com/GXwTt.png https://i.stack.imgur.com/P86zg.png
If anyone has suggestions on how to resolve this issue, it would be greatly appreciated. When reloading the page on any route, the component should be mounted, but it is not displaying properly in the vue router. As a result, the component is not being mounted.
Edit:
Requested information: In App.vue, the log shows /myproject/public_html/