通过参数传递的 id 在页面刷新时丢失答案

【问题标题】：id passed through params get lost on page refresh通过参数传递的 id 在页面刷新时丢失
【发布时间】：2018-08-21 07:53:29
【问题描述】：

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

但是刷新页面时会出现问题。通过 params 传递的 id 丢失 - 变为 null。导致 subscribers 被定义为 data 中的空数组的原因变为未定义，如此错误所示：

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
},

我做错了什么？

【问题讨论】：

@KirkLarkin 是的。但在 API 调用中，它显示为 null
@KirkLarkin 完成！
我认为是id。 fundProp 似乎工作正常，当我发现动态路由需要它时，我开始传递 id。
@KirkLarkin 你使用 VSCode 吗？我们可以试试 VSCode 直播分享，会更好。
stackoverflow.com/questions/48940759/… fundProp 不是网址的一部分

标签： vue.js parameters

【解决方案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

【讨论】：