vue3页面统一背景色后，如何更改某个页面的背景色并且避免css污染？

我们在开发时候，有时候也想给不同页面设置不同的背景颜色。

• 如果设置 scoped 呢，其它页面也无法设置
• 如果不设置，a 页面是红色，在 b 页面设置完蓝色，由于 Vue 是单页面应用，我们会发现 a 页面也会变成蓝色。

那么这个时候我们就可以使用生命周期法了。 代码如下：

onMounted(() => {
  document
    .querySelector(".wrapper")
    .setAttribute(
      "style",
      "background: linear-gradient(90deg, #18C1ED 0%, #3495EA 50%, #2161EF 100%);"
    );
});
onBeforeUnmount(() => {
  document.querySelector(".wrapper").removeAttribute("style");
});

这段意思是在页面创建后设置背景颜色，同时为了防止设置之后会污染其它页面的 css，这时候只需要在页面销毁前取消设置背景颜色。