vue-router：防止参数更改时的路由

Question

我正在尝试确认离开未保存的表单路线，如果用户拒绝，则取消更改路线。

它主要适用于

beforeRouteLeave: function (to, from, next) { 
                      if (!confirm('Leaving form')) next(false);
                   }

问题在于路由参数，例如#/form-path?id=5 - 更改id 参数不会触发beforeRouteLeave。

我可以使用哪个钩子来防止参数更改时导航？

Answer 1

Dynamic route matching 专门设计用于使不同的路径或 URL 映射到相同的路由或组件。因此，从技术上讲，更改参数并不能算作离开（或更改）路线，因此beforeRouteLeave 正确地不会被解雇。

不过，我建议可以让路由对应的组件负责检测参数的变化。基本上，每当参数更改时，记录更改然后反转它（希望反转速度足够快以至于用户不会注意到它），然后要求确认。如果用户确认更改，则使用您的记录来“取消”更改，但如果用户未确认，则保持原样（不要反转反向）。

我没有亲自对此进行过测试，因此我不保证它可以正常工作，但希望它能消除关于应用程序的哪个部分负责检查哪些更改的任何困惑。