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

Question

场景：

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

有没有办法在我每次更改路线时 re-create/initialise 组件？

Answer 1

您可以查看 docs

中的 "Reacting to Params Changes" 部分

One thing to note when using routes with params is that when the user navigates from /user/foo to /user/bar, the same component instance will be reused. Since both routes render the same component, this is more efficient than destroying the old instance and then creating a new one. However, this also means that the lifecycle hooks of the component will not be called.

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

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

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

Answer 2

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

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

这是我通过道具的方式：

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

编辑: 但是在UI中可以看到的所有数据都是更新和正确的，那些数据是基于已经通过的prop .

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

How can I re initialize same components in different routes

vue.js

vue-router

vue-component

vuejs2