vue之修改单页面背景颜色

vue的特点在于组件化，可以轻便开发单页面应用，但弊端就是它没能像原生 *** 控各自的body节点，因为所有的页面都拥有同一个body。这就难受了，如果希望设模枣置单个页面的背景颜色而又不影响其他页面，那怎么办？

第一种方式（不建议）旦核拆

beforeCreate() { document.querySelector('body').setAttribute('style','background-color:rgb(245,245,245)')},

beforeDestroy(){ document.querySelector('body').setAttribute('style', "background-color:''")}

第二种

beforeRouteEnter(to, from, next) {

    // 添加背景色document.querySelector('body').setAttribute('style', '氏陵background-color:#f9f9f9')

    next()

  },

  beforeRouteLeave(to, from, next) {

    // 去除背景色document.querySelector('body').setAttribute('style', '')

    next()

  }

1.在components下面新建一个grid.vue的文件，在文件里放入内容

2.在css里新建一个grid.css文件，把grid.vue需要的嫌嫌样式放进来

3.在芹誉手router里的index.js里import，虚启import  文件名 from 文件存放的路径；并在routes下面写好路由

4.在main.js里引入grid.css的样式，import '路径名'

---