很难在 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 Routerpage-1 = SPA => 当您从转到时， body/html 不会重新渲染page-2）。

“问题一”——SPA

在单个文件组件-上body，样式仅在页面刷新html时适用（例如从到并单击）：page-1page-2F5

<!-- 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”非动态想法是使用Lifecycle-Hooks -created通过简单的 JS 更改主体背景。打开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

更多想法：

在 vue router 中改变 body 样式

CSS

一般用途：

body{
   background: orange;
}

不（*==> 选择所有元素）：