Question

我可以向beforeDestroy添加内容以防止破坏组件吗？？

或者有什么方法可以防止破坏组件吗？

我的情况是，当我通过vue-route更改spa页面时，我首先使用watch route，但我发现它不会触发，因为组件只是破坏..

Answer 1

您可以使用vue-route navigation-guards，因此如果您在挂钩内拨打router.afterEach((to, from) => { if(your condition){ next(false) //this will abort route navigation } })，导航将会中止。

req.flash('error', yourErrString);
res.render("register.ejs", {
   message: req.flash('error')
});

Answer 2

如 belmin bedak 所述，您可以使用keep-alive

当您使用keep-alive两个生命周期挂钩开始行动时，它们是activated和deactivated挂钩而不是destroyed
keep-alive的目的是缓存和不破坏组件
您可以使用include元素的exclude和keep-alive条件，并提及要包含的要缓存的组件的名称，并将其从缓存中排除。这是documentation
如果你想要优先破坏组件，即使它已被缓存，你可以使用vm.$destroy() here

此外，您可以在所有生命周期挂钩中console.log并检查正在调用哪个生命周期挂钩

Answer 3

根据此来源：https://router.vuejs.org/guide/advanced/navigation-guards.html

我建议你用你的 Vue 路由器做这样的事情：

const router = new VueRouter({  }); // declare your router with params

router.beforeEach((to, from, next) => {
    if(yourCondition){
        next(false); // prevent user from navigating somewhere
    } else {
        return next(); // navigate to next "page" as usual
    }
});

这将防止在您声明的条件下破坏您的 Vue 实例，并且还将防止用户导航到另一个页面。

Answer 4

尽管我认为@Vamsi Krishna的“ keep-alive”答案是解决此问题的正确“ VueJS方式”，但我不愿意为此重构代码的一部分。

我也无法使用“原样”的Vue路由器导航防护，因为在beforeRouterLeave的情况下，即使使用next(false)也阻止了路由的继续，但Vue中的组件已经存在毁了。我原来没有保存的任何状态都会丢失，这违背了取消路线更改的目的。

这不是我想要的，因为我需要保留组件中表单/设置的状态（组件重新加载自身并保持相同的路径）。

因此，我想出了一种策略，该策略仍然使用导航保护，但是还缓存了我在内存中的组件中进行的任何表单更改/设置。我在组件中添加了一个beforeRouteLeave钩子：

beforeRouteLeave (to, from, next) {
  if (!this.isFormDirty() || confirm('Discard changes made?')) {
    _cachedComponentData = null // delete the cached data
    next()
  } else {
    _cachedComponentData = this.componentData // store the cached data based on component data you are setting during use of the component
    next(false)
  }
}

在Vue组件之外，我初始化_cachedComponentData

<script>
let _cachedComponentData = null
module.exports = {
  ...component code here
}
<script>

然后在生命周期挂钩created或mounted中，我可以在组件中将_cachedComponentData设置为“继续用户离开的地方”：

...
if (_cachedComponentData) {
  this.componentData = _cachedComponentData
}
...

vue 2生命周期 - 如何停止beforeDestroy？

4 个答案: