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: {...}
})

我的目标是让router监听MainComponent中的数据，但是存在范围问题-MainComponent未定义。

是否有一种方法可以让router用结构化的方式来监听MainComponent中的数据？

Answer 1

您可以看到以下示例

//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>'
});

Vue / Vue路由器作用域

1 个答案: