代码之家 › 专栏 › 技术社区 › kinsomicrote

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

parameters vue.js

0

kinsomicrote · 技术社区 · 7 年前

我有一个叫 Subscribers 通过参数从另一个名为 Details . 我使用接收到的props进行API调用以获取订户列表。这很管用。

但刷新页面时会出现问题。通过参数传递的ID丢失-变为空。原因 subscribers 定义为数据中的空数组的值将变为未定义的值,如此错误所示:

TypeError: Cannot read property 'length' of undefined

这就是我传递参数的方式 细节 成分

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

我可能做错什么了?

1 回复 | 直到 7 年前

1

kinsomicrote 7 年前

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