javascript - 很难在 Vue js 中更改背景颜色

Question

我正在尝试将登录页面的背景颜色设为橙色，但问题是我目前拥有的所有页面都是橙色的。
我尝试添加 scoped到登录页面，因此它只会设置该页面的样式，但是当我这样做时，整个页面不再是橙色。
最终目标是只影响着陆页。
我已经尝试过 HTML 和 Body 而不是 ' * '，在这种情况下它们也不起作用。landingpage.vue :

<template>
    <div class="container">
        <div class=landing>
            <h1>Hello.</h1>
            <router-link to="/work">
                <button id="work" type="button">See my work</button>
            </router-link>
            <router-link to="/home">
                <button id="home" type="button">Go home</button>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Landing',
};
</script>

<style scoped>
* {
    background: orange;
}

h1 {
    margin-top: 100px;
    text-align: center;
    font-size: 80px;
    color: green;
}
#work {
    color: green;
    border: none;
    font-size: 25px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#work:hover {
    color: white;
}
#home{
    color: green;
    border: none;
    font-size: 15px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 70%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#home:hover {
    color: white;
}
</style>

Answer 1

HTML和 body是 外 应用程序(+ Vue Router = SPA => 当您从 page-1 转到 page-2 时，正文/html 不会重新渲染)。
“问题一” - SPA
在 单个文件组件 - body , html样式仅适用于 页面刷新 (例如，从 page-1 转到 page-2 并单击 F5):

<!-- page_2 -->
<style>
   body{
    background: orange; /* not apply if you go from page-1 to page-2 */
   }
</style>

“问题二”-“超出范围” scoped == CSS 将应用于 current component 的元素只要。 body 不是 current scoped component 的一部分.
Hello World 解决方案
解决这个问题的最基本的“hello world”不是动态的想法是使用 Lifecycle-Hooks - 在 created通过简单的JS改变 body 背景。在 destroyed删除背景。

<script>
export default {
  name: "orange-page",
  created: function () {
    document.body.style.backgroundColor = "orange";
  },
  destroyed: function () {
    document.body.style.backgroundColor = null;
  },
};
</script>

“分钟:100vh 应用程序”
另一种想法是添加“包装器”+样式 min:100vh在您的 #app 内(#app 将覆盖整个 body/html ***集: body { margin: 0;}。
相关示例:
https://www.pluralsight.com/guides/change-page-background-color-each-route
更多想法:
Changing body styles in vue router
css
一般使用:

body{
   background: orange;
}

不是( * ==> 选择 所有 元素):