2

好处beforeRouteLeave是您可以防止在某些情况下导航离开。

我有一个使用子路由来呈现页面的一部分的设置。如果未保存数据，我想在子路由上设置一个导航守卫，以防止切换到另一个。

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

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

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

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

4

3 回答 3

0

我知道这篇文章很老了。但这是我在寻找相同问题时发现的第一个问题。我不知道现在是否有更好的解决方案，但对于那些正在寻找解决方案的人，我可以分享我的：

1.定义一个全局状态

let isRouteChangeBlocked: boolean = false;

export function blockRouteChange(set?: boolean): boolean {
    if (arguments.length == 1) {
        isRouteChangeBlocked = !!set;
        return isRouteChangeBlocked;
    }

    return isRouteChangeBlocked;
}

2.替换路由功能

const originalPush = VueRouter.prototype.push;
VueRouter.prototype.push = function(location: RawLocation) {
    if (blockRouteChange()) {
        if (confirm("Du hast ungespeicherte Änderungen, möchtest du fortfahren?")) {
            blockRouteChange(false);
            return originalPush.call(this, location) as any;
        }
        return;
    }
    return originalPush.call(this, location) as any;
};

3.设置状态

@Watch("note.text")
private noteTextChanged() {
    blockRouteChange(true);
}

这正是我想要的。如果现在有更好的解决方案，请告诉我。您可以在此处获取完整的可运行示例：https ://github.com/gabbersepp/dev.to-posts/tree/master/blog-posts/vuejs-avoid-routes/code/example

于 2020-06-10T16:32:04.013 回答
0

我也在这里发布了相同的答案。

动态路由匹配专门设计用于使不同的路径或 URL 映射到相同的路由或组件。因此，从技术上讲，改变论点并不能算作离开（或改变）路线，因此beforeRouteLeave不会被解雇。

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

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

于 2017-01-03T11:59:48.050 回答
-1

您可以$route在组件中使用一个对象来观察它是否发生变化，然后启动确认模式......每当您的路线发生变化时都会调用它！

const Baz = {
  data () {
    return { saved: false }
  },
  template: `
    <div>
      <p>baz ({{ saved ? 'saved' : 'not saved' }})<p>
      <button @click="saved = true">save</button>
    </div>
  `,

  watch: {
    '$route': function () {
      if (this.saved || window.confirm('Not saved, are you sure you want to navigate away?')) {
      // do something ...
    }
  }
}
于 2016-10-06T16:29:20.320 回答