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>
END
本文作者:
文章标题:VUE修改单独页面body模式
本文地址:https://blog.imjunjun.cn/archives/116/
版权说明:若无注明,本文皆军军's Blog原创,转载请保留文章出处。
Last modification:April 26, 2022
如果觉得我的文章对你有用,请随意赞赏