Question

我使用beforeCreate和beforeDestroy挂钩来向body添加类。在某些情况下，我需要添加类，有些则不是。

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

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

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

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

我该如何解决这个问题？

Answer 1

尝试使用nextTick()

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

修改

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

Answer 2

我在项目中遇到了同样的问题，并且应用了类似的方法。

methods: {
  toggleBodyClass(addRemoveClass, className) {
    const el = document.body;

    if (addRemoveClass === 'addClass') {
      el.classList.add(className);
    } else {
      el.classList.remove(className);
    }
  },
},
mounted() {
  this.toggleBodyClass('addClass', 'mb-0');
},
destroyed() {
  this.toggleBodyClass('removeClass', 'mb-0');
}

使用vueJS中的生命周期钩子向body添加类

2 个答案: