I am currently developing a webpage using vue and vue-router. Here are the routes I have set up:
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
import App from './views/App'
import Home from './views/Home'
const router = new VueRouter({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
component: Home
}
],
});
const app = new Vue({
el: '#app',
components : { App },
router
});
The issue I am facing is that the Home component is not being mounted. Here is the code for the component:
<template>
<div class="row">
.....
</template>
<script>
export default {
mounted: function() {
console.log('hello')
}
}
</script>
When I add another router and use router-link, the component loads as expected. However, the Home component does not load on the first page load. How can I solve this issue?
My App.vue file consists of a navbar and a footer. Here is the code snippet for the component:
<template>
<div>
.... a navbar ....
<div class="body z-depth-5">
<router-view :key="$route.path" @ajaxover="ajaxOver"></router-view>
</div>
.... a footer ....
</div>
</template>
<script>
import PageLogo from '../components/PageLogo'
import Loading from '../components/Loading'
export default {
mounted : function(){
},
components : {
'page-logo' : PageLogo,
'loading' : Loading
},
methods : {
ajaxOver : function() {
}
}
</script>