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

Question

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

它主要适用于

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

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

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

Answer 1

Dynamic route matching专门设计用于使不同的路径或 URL 映射到相同的路由或组件。因此，更改参数在技术上不算作离开(或更改)路由，因此 beforeRouteLeave 不会被触发。

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

我没有亲自测试过这个，因此我不保证它能正常工作，但希望它能消除关于应用程序的哪一部分负责检查什么变化的任何混淆。