$router.push 刷新页面并丢失数据答案

【问题标题】：$router.push refreshing the page and losing data$router.push 刷新页面并丢失数据
【发布时间】：2019-08-07 04:52:18
【问题描述】：

我有一个调用函数。

 editTrade: function(tradeData) {
    //include index and/or get object from store
    //forward through router.
    this.$router.push({name: '/trading/newTrade', params: {tradeData}})

当我点击此端点时，页面会刷新，它会显示 / 而不是预期的路线并丢失我的所有数据，因此当我转到该路线时它是空的。

网址栏的路径正确，但页面不正确。我查看了文档，如果您要发送参数，您应该使用name:，我还尝试了文档中提到的router.push，但无济于事。

【问题讨论】：

删除名字中的第一个 / 可能是离开水疗中心的罪魁祸首

标签： vue.js vue-router

【解决方案1】：

仅当路由被命名时，才能通过名称引用路由。确保您引用的路由在 Vue Router 对象的路由定义中具有 name 参数。

您还可以通过使用路径而不是名称以编程方式导航到路线。在您的情况下，它看起来像这样：

this.$router.push({ path: `/trading/newTrade/${tradeData}` })

Documentation reference

【讨论】：

我经历了一个很好的教程，我的名字是正确的，即使它看起来像一条路径，这就是我的名字。无论如何，我已经修复了它以使用简单的字符串。关于 params 对象，您的示例代码没有使用它，那么您如何将数据放入组件中？我正在使用参数。
@illcrx 正如documentation 所说，在提供path 时，params 选项将被忽略。正如您在上面答案的代码 sn-p 中看到的那样，我将它们直接插入到路径中，而不是传递路由参数。请注意，路由参数和它的组件道具不是一回事。
@illcrx 我想我可以看到你想要做什么。 tradeData 变量是一个对象，对吧？如果是这样，您不能将它们传递给导航。您可以： a) 为您的交易数据定义 ID 并将其作为路由参数传递，然后在组件中通过其 ID 获取数据； b）（不太漂亮，不推荐）使用JSON.stringify函数对数据进行字符串化并将其作为路由参数传递，然后获取字符串化数据并使用JSON.parse解析它

【解决方案2】：

我得到了它的工作，在我的情况下，我可以通过按下按钮来完成它，这无论如何都是我的用例。 b-button 是 VueBootstrap。我确实将name 更改为一个简单的字符串。

<b-button
  class="cardButton"
  variant="secondary"
  //This is where the magic happens
  to="{ name: 'newTrade', params: {trade} }"
> Edit </b-button>

在组件中

created () {
        if (this.$route.params.trade){
          //You can use $route.params.trade to access trade.
          this.model = this.$route.params.trade;
        }

【讨论】：