Vue - 每个页面单独设置 body 背景色（独立修改单个页面的背景色，不同页面设置不同的背景颜色）

前言

在 Vue.js 项目中，您直接通过 body{...} 设置背景色后，会发现所有页面都变了。就算您在最外层的 DIV 容器上，设置样式背景颜色也不行。

网上的大部分教程，实现的方法都很臃肿且代码不合理，不利用后期维护和扩展。

本文将提供给您单独设置每个页面背景色的详细教程，仅需简单 4 行代码，哪里用就写哪里！

如下图所示，每次路由切换到新页面后，背景色都会发生变化：

解决方案

您也可以将其封装为一个函数，通过传入颜色值让其执行，后续维护和扩展都方便。

通过两个生命周期，在页面没有渲染时改变背景色。

export default {
   
  data()