在 Vue.js 中，如何防止子路由的导航？

好的一点是beforeRouteLeave是你可以防止在某些情况下导航离开。

我有一个使用子路由来渲染页面的一部分的设置。我希望在子路线上设置一个导航守卫，以防止在未保存数据的情况下切换到另一条路线。

{
    path: '/customers/view',
    component: ViewCustomerShell,
    children: [
        {path: ':id', name: 'ViewCustomer', component: ViewCustomer}
    ]
},

所以当我访问时/customers/view/12并进行更改，如果他们尝试加载/customers/view/13，我想弹出通常的确认并可能停止导航。自从beforeRouteLeave在这种情况下不会被调用，建议的防止导航的方法是什么？看来在看$route就太晚了，因为那时导航已经发生了。

注：如上所述，beforeRouteLeave在这种情况下不会被调用；它不起作用。

注意：使用onbeforeunload不起作用，因为它仅在整个页面更改时触发。

我也发过同样的答案here https://stackoverflow.com/a/41442991/2468508.

动态路由匹配 https://stackoverflow.com/a/41442991/2468508专门设计用于使不同的路径或 URL 映射到相同的路由或组件。因此，改变参数在技术上并不算作离开（或改变）路线，因此beforeRouteLeave正确地不会被解雇。

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

我没有亲自对此进行测试，因此我不保证它能够工作，但希望它能够消除关于应用程序的哪一部分负责检查哪些更改的任何混乱。