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

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

1.7k197897

发布于
2017-05-05

更新于
2017-05-05

✓ 已被采纳

最简单的方法

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

CRIMX

9.1k3720

发布于
2017-05-04

判断地址再改变颜色。

Chobits

7.4k2827

发布于
2017-05-04

更新于
2017-05-04

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>