Question

我有一个名为Subscribers的组件，它通过参数从另一个名为Details的组件中接收道具。我使用收到的道具进行API调用以获取订阅者列表。效果很好。

但是刷新页面时会出现问题。通过参数传递的ID丢失-变为null。出现此错误的原因是，subscribers被定义为数据中的空数组的原因变得未定义：

TypeError: Cannot read property 'length' of undefined

这就是我从Details组件传递参数的方式

<router-link class="unsubscribe" :to="{ name: 'fund-subscribers', params: {fundProp: fund, id: fund.id } }">View all subscribers to this fund</router-link>

然后我有这个：

props: {
  fundProp: {
    type: Object,
    default() {
      return {
        id: null,
        title: '',
        description: ''
      };
    }
  },
},
data() {
  return {
    fund: this.fundProp,
    subscribers: [],
  }
},

这是fund-subscribers

的路由配置代码

{
  path: 'funds/:id/subscribers',
  name: 'fund-subscribers',
  component: Subscribers,
  meta: {
    title: 'Admin'
  },
  props: true
},

我可能做错了什么？

Answer 1

因此，我找到了一种解决方法。首先，不需要传递fundProp，我只能通过参数将id传递给router-link

<router-link class="unsubscribe" :to="{ name: 'fund-subscribers', params: { id: fund.id } }">
  View all subscribers to this fund
</router-link>

完成此操作后，我现在可以使用this.$route.params.id。我可以将资金设置到组件数据中，然后使用它进行API调用。

data() {
  return {
    fund: this.$route.params.id
  }
},

向服务器发出请求的函数可以使用以下路径： /funds/${fund}/users，而不是/funds/${fund.id}/users

我希望这以后能对某人有所帮助（将来对我也有帮助）。

要更好地理解它，请使用以下链接：

https://forum.vuejs.org/t/route-params-not-showing-after-full-page-refresh/30364

https://router.vuejs.org/en/advanced/data-fetching.html

通过参数传递的ID在页面刷新时丢失

1 个答案: