Vue 单独页面设置 body 样式

需求：针对不同的页面， 的样式需要做一些变化。比如不同页面设置不同的背景色，如果直接在页面里设置 body 的样式，页面并不会生效，如下：

<template>
    <div>单独页面</div>
</template>

<style>
body {
    backgroud-color: #ccc;
    min-width:400px;
}
</style>

解决方法

<template>
    <div>单独页面</div>
</template>

<script>
	export default {
		 beforeRouteEnter(to, from, next) {
            // ...
            window.document.body.style.minWidth = "1500px";
            next();
        },
        beforeRouteLeave(to, from, next) {
            // ...
            window.document.body.style.minWidth = "1280px";
            next();
        },
	}
</script>

<style>
body {
    backgroud-color: #ccc;
    min-width:400px;
}
</style>