单击活动路由器链接

Question

在我的Vue 2应用程序中，我有一个菜单栏，其菜单项使用router-link。其中一个菜单项是“客户”，它将用户带到客户编辑器。现在，如果用户在客户编辑器中点击同样的“客户”菜单项，则不会发生任何事情。我认为这是因为文档中提到的这种行为：“在HTML5历史模式中，router-link将拦截click事件，以便浏览器不会尝试重新加载页面。”

现在，这是完全可以理解的，并且在大多数情况下，这将是我想要的行为。但实际上我在这里想要重新加载组件，然后回到一个干净的平板。或者更准确地说，对于某些事件我可以在客户编辑器中处理以设置我希望它们的方式。事实上，我认为情况确实如此，但是当我设置手表时，就这样了。

    watch: {
      '$route' (to, from) {
        console.log("Route changed");
      }
    },

我没有看到任何记录到控制台的内容。可能是某些事件正在发生，我没有处理，而Vue只是重复使用该组件。但是我怎么能阻止它这样做呢？

Answer 1

根据this issue，您可以向当前@click.native添加router-link绑定，并在其中重新初始化您的组件数据。

但快速而肮脏的解决方案是在路线中附加一个唯一的参数，例如日期。请检查此fiddle

Answer 2

实现此目的的预期方法似乎是实现beforeRouteUpdate函数来重置路由组件的属性。在vue-router的GitHub上查看此问题：Routing the same component, the component is not reload, but be reused? #1490。

  

这是预期的行为，Vue尽可能重用组件。

     

您可以使用beforeRouteUpdate挂钩对路由交换机做出反应   使用相同的组件。