javascript - 推送路线时将对象作为 Prop 传递

Question

此函数位于路由器 View 之外的组件中。

goToMarkets(){
      this.$router.push({path: '/markets', params: {stock: this.model}})
    }

但是“市场”组件中的 Prop 未定义

路由器:

const routes = [
  {
    path: '/markets',
    name: 'Markets',
    component: Markets,
    props: true
  },]

市场组件:

props: {
    stock: Object
  },

即使在它被传递之前(在第一个函数中)，该 prop 在 Markets 组件中是未定义的。

Answer 1

这里发生了几件事。

首先，路由参数构成 URL 的一部分，并在路由定义中预先定义。

给定路由定义:

{
  path: '/markets/:myparam',
  name: 'markets',
}

然后你会像这样过渡到它:

this.$router.push({ name: 'markets', params: { myparam: 'foo' } })

URL 看起来像:

/markets/foo

你还没有为你的路线定义任何参数，所以它不会工作。

其次，参数必须是字符串或数字。您不能将对象作为参数传递。没有办法做到这一点；它不受支持。我认为这里的理念是 URL 本身应该包含所有路由器状态。

解决这个问题的一种方法是传递一个 ID，然后从某个共享存储(例如 Vuex)中获取 ID 中的对象。

我不知道你的 stock 模型是什么，但也许参数可能只是一个像 msft 这样的字符串，所以 URL 像 /markets/msft？您能否在不需要传递完整对象的情况下使其工作？

如果是小对象，可以将对象的属性解构为查询参数。但是您不能像将对象作为参数传递给函数调用那样将对象实例与路由转换一起传递。