【问题标题】:How to stop going to next life cycle hook in vueJs?如何停止进入 vueJs 中的下一个生命周期挂钩?
【发布时间】:2021-02-03 00:46:47
【问题描述】:

我的 vue 页面包含 Created、mounted、updated、destroy 钩子。我需要为页面渲染添加一个条件。在我的情况下,在创建的钩子中,我根据确认警报创建一个变量 true 或 false,如果它是 true,我希望 vue 执行其他生命周期钩子,否则会路由到不同的页面。 vue 是否可以做到这一点,如果可以,怎么做?

【问题讨论】:

  • 将条件放在您想要的钩子中并重定向。后续的生命周期都不会执行,因为当前组件已被销毁。查看lifecycle diagram 了解挂钩顺序。
  • 实际上我在创建的钩子中使用了确认组件 [npmjs.com/package/vue-confirm-dialog]。如果确认组件中的条件为真,那么我会转到下一个挂钩,否则我会路由到其他页面,由于某种原因它无法正常工作,并且在我确认所有生命周期挂钩都已执行之前。

标签: vue.js


【解决方案1】:

在您的created 钩子中,如果此值为false,并且您想重定向到不同的页面,您可以使用location API

//...
  created: function () {
// your code
    window.location.replace("https://google.com"); // this will redirect you to another page
  }
//...

【讨论】:

  • 由于使用了来自 [npmjs.com/package/vue-confirm-dialog] 的确认组件,我遇到了这个问题。但是我已经通过创建一个虚拟页面并路由到它直到我确认对话来解决。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2017-08-04
  • 2015-12-19
  • 2018-04-28
  • 1970-01-01
相关资源
最近更新 更多