我正试图使登录页的背景颜色为橙色，但问题是我目前拥有的内容使所有页面都为橙色。
我尝试将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>
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解决方案
最基本的"；你好世界"；解决这个问题的非动态思想是使用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>
"min:100vh应用程序">
另一个想法是添加"；包装器"+在#app中样式min:100vh(#应用程序将覆盖整个身体/html/***集：body { margin: 0;}.
相关示例：https://www.pluralsight.com/guides/change-page-background-color-each-route
更多想法：
在vue路由器中改变机身样式
css
一般用途：
body{
background: orange;
}
不(*==>选择所有元素(：
而不是
* {
background: orange;
}
进行
html {
background: orange;
}
或
body {
background: orange;
}
您还可以动态绑定该类，使其仅应用于登录页路由。
因此，在App.vue或任何充当应用程序外壳的上层组件中，您可以执行以下操作：
/* ==== in App.vue (or Landing Page parent Component) ==== */
<template>
<div :class={orangeBackground: $route.path.includes('/landingPagePath')}>
// other stuff could be here - like the router view or whatever
<router-view> </router-view>
</div>
</template>
<script>
</script>
<style>
.orangeBackground {
background: orange;
}
</style>
基本思想是整个DOM都包含在父组件中，但我们只在浏览器位于的登录页路由上时应用.orangeBackground类
使用新的组合API，代码如下：
setup() {
var color = "#343E3D";
onMounted(() => {
console.log("mounted!");
document.body.style.backgroundColor = color;
});
onUnmounted(() => {
console.log("unmounted!");
document.body.style.backgroundColor = null;
});
return {};
},
这两个生命周期挂钩将在加载/卸载组件时更改背景。我也遇到过类似的问题，其中一个页面需要与网站其他部分不同的背景。