vue-router:防止在参数更改时路由 [英] vue-router: Preventing routing on argument change

问题描述

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

I'm trying to confirm leaving not saved form route, and if user declines, to cancel changing the route.

它主要适用于

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

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

The problem is with route arguments, like #/form-path?id=5 - changing the id argument does not trigger beforeRouteLeave.

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

推荐答案

Dynamic路由匹配 专门用于使不同的路径或 URL 映射到相同的路由或组件.因此，更改参数在技术上不算是离开(或更改)路由，因此 beforeRouteLeave 正确地不会被触发.

Dynamic route matching is specifically designed to make different paths or URLs map to the same route or component. Therefor, changing the argument does not technically count as leaving (or changing) the route, therefor beforeRouteLeave rightly does not get fired.

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

However, I suggest that one can make the component corresponding to the route responsible for detecting changes in the argument. Basically, whenever the argument changes, record the change then reverse it (hopefully reversal will be fast enough that it gets unnoticed by the user), then ask for confirmation. If user confirms the change, then use your record to "unreverse" the change, but if the user does not confirm, then keep things as they are (do not reverse the reverse).

我没有亲自测试过这个，因此我不保证它可以工作，但希望它可以消除关于应用程序的哪个部分负责检查哪些更改的任何混淆.

I have not tested this personally and therefor I do not gurantee it to work, but hopefully it would have cleared up any confusion as to which part of the app is responsible for checking what change.

这篇关于vue-router:防止在参数更改时路由的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！