Vue-router 组件内保护不会触发 router.push() 被调用答案

【问题标题】：Vue-router in-Component guards won't trigger router.push() is calledVue-router 组件内保护不会触发 router.push() 被调用
【发布时间】：2020-05-14 14:04:57
【问题描述】：

当点击<router-link to="/"> 时会触发组件内保护beforeRouteLeave。但是，当我以编程方式调用 router.push({ path: "/" }) 时，它不会被触发。

这有什么问题吗？

编辑

我只是尝试创建一个sandbox 并发现它发生在使用动态参数导航到同一路径时。

例如，从/item/1 导航到/item/2 会导致此问题。

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

我认为这是一个意想不到的行为，如果您提供更多上下文会更有帮助。

编辑

如果您只是传递不同的参数，您实际上并不会离开路线，这就是beforeRouteLeave 不会被触发的原因。

相反，您可能想使用beforeRouteUpdate

有关组件内防护的更多信息，请参阅docs。

【讨论】：

你的意思是应该触发？
是的，在所有情况下，它对我来说都很好。
我发现它发生在另一种情况下。问题现已编辑。
已触发。但是，如果存在任何未保存的数据，是否可以避免导航？看来它不是这样工作的。
是的，您仍然可以通过beforeRouteUpdate 实现此目的，但它会在您的路线fullPath 中的任何内容发生变化时触发，因此如果您的路线中有多个变量（例如超过 1 个参数或查询) 那么在运行逻辑之前比较 to 和 from 对象以确保这是您想要的情况可能是个好主意。