单击活动路由器链接答案

【问题标题】：Clicking on active router-link单击活动路由器链接
【发布时间】：2018-02-06 13:52:02
【问题描述】：

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

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

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

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

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

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

但一个快速而肮脏的解决方案是在您的路线上附加一个独特的参数，例如日期。检查这个fiddle

【讨论】：

我可能不得不沿着不太令人满意的@click.native 路线走下去。对我来说，一个主要问题是调用的函数不可能是组件中的方法。我将进一步研究小提琴，看看我是否可以解决这个问题。
我目前所做的是使用全局总线并在@click.native 函数中发出一个带有路线名称的重置事件。在组件中，我在mounted() 中为reset 事件设置了一个监听器，然后做出相应的反应。有效，并且可重复使用，但似乎冗长。无论我做什么，我都无法让组件只响应路由参数的变化。
酷！我认为单击路由器链接时触发的事件/生命周期挂钩，即使路由实际上没有改变，也会是 vue-router 的一个很好的补充

【解决方案2】：

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

这是预期行为，Vue 在可能的情况下重用组件。

您可以使用beforeRouteUpdate 挂钩来响应路由切换使用相同的组件。

【讨论】：

如果用户再次单击菜单项，beforeRouteUpdate 不会触发。大概因为没有路由变化，也没有参数变化，所以没有路由更新？
@JohnMoore 你说得对，看看this issue。