vue.js - 在 vueJS 中使用生命周期钩子(Hook)将类添加到主体

Question

我使用 beforeCreate 和 beforeDestroy Hook 将类添加到正文。在某些情况下我需要添加类，在某些情况下则不需要。

所以我在每个需要此功能的组件中都有这样的代码:

  beforeCreate() {
    document.body.classList.add('has-background')
  },

  beforeDestroy() {
    document.body.classList.remove('has-background')
  }

问题是，如果我从一个路由导航到另一个路由，例如从 A 组件导航到 B 组件，则首先执行 B 组件的 beforeCreate ，然后执行 beforeDestroy A 组件的一部分，它删除了 has-background 类。

如何解决这个问题？

Answer 1

尝试使用nextTick()

beforeCreate() {
    this.$nextTick().then(() => document.body.classList.add('has-background'))
},

编辑:

我还建议使用created()而不是beforeCreated()。但要实现最佳行为，最好使用 mounted()