I am facing an issue while using single file components with vue-router and vue-2.0. The problem I can't seem to resolve is that the this.$route object, when called from a component, always returns empty values.
For example:
https://i.sstatic.net/wsUct.png
Messages.vue
<template>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading">Post List</div>
<div class="panel-body">
<li v-for="item in items">
{{ item.message }}
</li>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
created() {
console.log(this.$route);
},
mounted() {
console.log('Component mounted.')
},
data() {
return {
items: [
{message: 'Foo'},
{message: 'Bar'}
]
}
},
}
</script>App.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Messages from './components/Messages';
Vue.use(VueRouter);
const routes = [
{ path: '/user/get/:id', component: Messages},
]
const router = new VueRouter({
routes
})
const app = new Vue({
router,
el: '#app',
components: { Messages }
});Your assistance on this matter would be highly appreciated.