用vue的时候想让一个page背景色改变,只改那一页的背景色怎么做呢?

我用了body {改背景色的css}
结果别的页面也变了。。。。。
箭头指的地方是用最外层容器填充了背景色的
图片描述

回答:

最简单的方法

export default {
  name: 'your name',
  beforeCreate () {
    document.querySelector('body').setAttribute('style', 'background:#fff')
  },
  beforeDestroy () {
    document.querySelector('body').setAttribute('style', '')
  }
}

回答:

判断地址再改变颜色。

回答:

https://router.vuejs.org/zh-c…

使用钩子 手动修改document.body.style


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
    <div id="app"></div>

    <template id="main">
        <div id="app">
            <ul>
                <li><router-link to="/">Home</router-link></li>
                <li><router-link to="/1">Page1</router-link></li>
                <li><router-link to="/2">Page2</router-link></li>
            </ul>
            <router-view></router-view>
        </div>
    </template>

    <script src="http://cdn.bootcss.com/vue/2.3.2/vue.min.js"></script>
    <script src="http://cdn.bootcss.com/vue-router/2.5.3/vue-router.min.js"></script>

    <script>
        const Home = { template: '<div>Home</div>' }

        const Page1 = {
            template: '<div>Page1</div>',
            beforeRouteEnter(to, from, next) {
                window.document.body.style.backgroundColor = 'red';
                next();
            },
            beforeRouteLeave(to, from, next) {
                window.document.body.style.backgroundColor = '';
                next();
            }
        }

        const Page2 = {
            template: '<div>Page2</div>',
            beforeRouteEnter(to, from, next) {
                window.document.body.style.backgroundColor = 'blue';
                next();
            },
            beforeRouteLeave(to, from, next) {
                window.document.body.style.backgroundColor = '';
                next();
            }
        }

        const router = new VueRouter({
            routes: [
              { path: '/', component: Home },
              { path: '/1', component: Page1 },
              { path: '/2', component: Page2 }
            ]
        })

        new Vue({
            router,
            template: '#main'
        }).$mount('#app')
    </script>
</body>
</html>

回答:

一个page本身不就一个容器包着呢么,把容器的背景颜色变一下可否?

回答:

<template>

<div style="background:red;">
</div>

</template>

回答:

你打包的时候组件里的所有样式都是放到单面的顶部当然会被其他的改变
只有写到行间去

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注