推送路线时将对象作为 prop 传递

Question

该功能位于路由器视图之外的组件中。

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

但该道具在“市场”组件中未定义

路由器：

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？你能让它工作而不需要传递完整的对象吗？

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