单击活动路由器链接

Question

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

现在，这是完全可以理解的，而且在大多数情况下，这将是我想要的行为。但实际上在这里我希望重新加载组件，回到干净的状态。或者更准确地说，对于发生的某些事件，我可以在客户编辑器中处理这些事件以设置我希望它们成为的样子。事实上，我认为情况会是这样，但是当我设置手表时，因此

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

我没有看到任何记录到控制台的内容。可能发生了一些我没有处理的事件，而 Vue 只是简单地重用了该组件。但是我怎样才能阻止它这样做呢？

Answer 1

根据这个问题，您可以@click.native向当前添加绑定router-link并在那里重新初始化您的组件数据。

但是一个快速而肮脏的解决方案是在你的路线上附加一个唯一的参数，比如日期。检查这个小提琴