如何在不同的路由中重新初始化相同的组件答案

【问题标题】：How can I re initialize same components in different routes如何在不同的路由中重新初始化相同的组件
【发布时间】：2017-05-11 10:47:37
【问题描述】：

场景：

我有一个多步骤表单，如果用户点击下一步按钮，路线中唯一改变的就是 id，例如形成/step/:id，但每当我的步骤/路线包含与前一个相同的组件时，它只会调用第一个组件的“created”方法，不会调用下一个。

有没有办法在我每次更改路线时重新创建/初始化组件？

【问题讨论】：

【解决方案1】：

我还遇到了一个问题。每当我的路由参数发生变化时，我传递给该组件的道具都不会更新。

在第一次加载时，道具值得到更新，但是当我进入下一步/路线时，$route 得到更新，并且手表内部的方法也被执行，但是传递的道具值与第一步/路线的值相同。然后，当我再次进入下一步/路线时，第三步/路线的组件的值应该是第二步/路线的组件的值。似乎道具的价值比实际路线落后了 1 步。

这是我传递道具的方式：

<el-repeater :element.sync="element"></el-repeater>

编辑：但是所有可以在 UI 中看到的数据都是更新和正确的，并且这些数据是基于已经传递的 prop。

【讨论】：

【解决方案2】：

您可以查看docs 中的“对参数更改做出反应”部分

在使用带参数的路由时需要注意的一点是，当用户从 /user/foo 导航到 /user/bar 时，将重复使用相同的组件实例。由于两条路由都渲染相同的组件，因此这比销毁旧实例然后创建新实例更有效。但是，这也意味着组件的生命周期钩子不会被调用。

要对同一组件中的参数变化做出反应，您可以简单地观察 $route 对象：

  watch: {
    '$route' (to, from) {
      //update the variables with new route params
    }
  },

你也可以看看我的类似回答here。

【讨论】：