Vue修改单独页面 body样式

由于SPA页面的特性，传统的设置 body 背景色的方法并不通用。
可以通过导航守卫或设置组件内第一个DIV样式实现。

方法一 设置导航守卫

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import BasicLayout from "@/layouts/BasicLayout.vue";

const beforeRouteEnter = (to, from, next) => {
    next(vm => {
        // 设置Body背景颜色
        window.document.body.style.backgroundColor='#333';
    });
};
@Component({
  components: {
    BasicLayout
  },
  beforeRouteEnter
})

export default class Home extends Vue {}
</script>

方法二 设置组件内第一个DIV样式

template

<template>
  <div class="home">
  </div>
</template>

CSS

<style scoped lang="less">
@global-background: #333;
.home {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  overflow-y: auto;
  background-color: @global-background;
}
</style>