Vue / vue-router scoping

Question

import ExpenseView from './path'
import template from './path'

const MainComponent = new Vue({
   el: '#app',
   data: {
       expense: [{ description: 'expense description', amount: 14.99, _id: 'l;dkfjg;ladfjg;klafjg;l' }],
   },
   router: new VueRouter({
       routes: [
           { path: '/dash', component: ExpenseView, props: { default: true, expenses: MainComponent.expense } },
       ]
   }),
   template,
   created() {...},
   methods: {...},
   computed: {...}
})

My goal is to have the router listen to the data in MainComponent but there are scoping issues - MainComponent is not defined.

Is there a way to get the router listening to the data in MainComponent with the way this is structured?

Answer 1

You can see the following example

 //you can try the following code //index.js import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) import RSSFeed from '@/components/RSSFeed.vue' export default new Router({ routes: [ { path: '/rss-feed', name: 'RSSFeed', component: RSSFeed, props: { authorName: 'Robert' } }, ] }) //RSSFeed.vue <template> <ol id="feed"> {{authorName}} </ol> </template> <script> import Post from './Post' export default { props: ['authorName'], data () { return { items: [ { "title":"Vuejs Nodejs", "pubDate":"20-07-2018", "description":"Leading vuejs nodejs", "link":"https://hoanguyenit.com" } ], errors: [] } } } </script> 

 Example //in router const router = new VueRouter({ routes: [ { path: 'YOUR__PATH', component: Home, props: { authorName: 'Robert' } } ] }) //in Home.vue //And inside the <Home /> component, var Home = Vue.extend({ props: ['authorName'], template: '<p>Hey, {{ authorName }}</p>' });