vue 在新窗口打开页面并设置不同的背景

      开发一个新系统，前端用的vue，vue是单体应用，所有页面都在一个窗口里实现，但项目要求在点button链接后要新打开一个浏览器页面，解决方法如下：

1. 给此button设置新事件 @click="createdefect"

<el-button v-no-more-click type="primary"  icon="el-icon-circle-plus-outline" @click="createdefect">提交缺陷</el-button>

2.在页面上新增一个默认 a组件

<a   ref='target'  class="link"  target="_blank"></a>

3. 写js事件

createdefect(){
  let target = this.$refs.target
  target.setAttribute('href', window.location.origin + '/#/createDefect')
  target.click()
},

    或者可以这样：

createdefect(){
  let routeName = "createDefect";
  let routeData = this.$router.resolve({
    name: routeName,
  });
  window.open(routeData.href, "_blank");
},

     然后新开的页面还用的app.vue中的全局背景，需要更改。之前想着用改变最上层body的css覆盖来解决问题，结果没走通，查资料发现要从生命周期， js的逻辑来解决。要通过一个组件“初始化”，“销毁"来控制body的颜色。下面是具体代码。

1. 在新页面的js中增加如下代码：

beforeCreate: function() {
  document.getElementsByTagName("body")[0].className="body_back";
},
beforeDestroy: function() {
  document.body.removeAttribute("class","body_back");
}

2. 在新页面对应的css中设置如下:

.body_back{
  background:linear-gradient(to right,#fff,#f5f6f9)
}