Vue将道具传递到路线组件

Question

我正在尝试通过路由器将数据从Vue实例传递到组件。我试图按照文档和示例中的堆栈溢出进行操作，但无法使其正常工作。.我试图传递一个名为“ funds”的道具，以下是我的脚本和组件：

main.js

new Vue({
  el: '#app',
  router,
  components: {
    App
  },
  data: {
    funds: [...]
  },
  template: '<App :funds="funds"/>'
});

App.vue

<template>
  <div id="app">
    ...
    <router-view :funds="funds" />
  </div>
</template>

<script>
  export default {
    name: 'App'
  }
</script>

Vue.use(Router)

export default new Router({
 routes: [
   ...
   {
     path: '/funds',
     name: 'funds',
     component: List
   }
 ]
})

List.vue

<template>
  <div>
    <table class="table table-striped">
      <thead>
        <tr>
          <th scope="col">#</th>
          <th scope="col">Name</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="fund in funds" :key="fund.name">
          ...
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  export default {
    name: 'List',
    props: ['funds']
  }
</script>

我在控制台中看到警告：

[Vue warn]: Property or method "funds" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.

found in

---> <App> at src/App.vue
       <Root>

但是，当我运行此命令时，我看不到表中正在渲染的任何行，实际上，该表只是空的（只有标题）。我在连锁店里缺少什么吗？

Answer 1

我认为问题出在这一行：v-for="fund in $route.params.funds"

$route.params是指路由器参数。在这种情况下，您尝试访问道具。正确的语法为：

        <tr v-for="fund in funds" :key="fund.name">
          ...
        </tr>