点击切换css文件，俗称换肤功能

完整代码

<template>
  <div class="container_default">
    <div class="container_default_top">
      <!-- <img src="../assets/img/address.jpg"> -->
      <span :class="cssBox == 'white' ? 'addressBGImg2' : 'addressBGImg1'" @click="setCss"></span>
      <span>您的位置 > {{addressName}}</span>
    </div>
    <div class="container">
      <div class="left_title">
        <left-title @addRouter="addRouter" @addName='addName' :selectBoolean="selectBoolean"></left-title>
      </div>
      <div class="left_tree" v-show="adminBoolean">
        <left-tree ref="refLeftTree"></left-tree>
      </div>
      <div class="right_table" :class="{'left_tree_mgl_20':!adminBoolean}">
        <component :is="pathURL"></component>
      </div>
    </div>
  </div>
</template>
<script>
import UserManagement from './components/userManagement'
import logAudit from './components/logAudit'
import resourceManagement from './components/resourceManagement'
import roleManagement from './components/roleManagement'
import userGroupManagement from './components/userGroupManagement'

import LeftTitle from './LeftTitle'
import LeftTree from './LeftTree'
import { getImgPath } from '@/api/user'
export default {
  name: 'Home',
  components: {
    LeftTitle,
    LeftTree,
    UserManagement,
    logAudit,
    resourceManagement,
    roleManagement,
    userGroupManagement,
  },
  data() {
    return {
      pathURL: 'resourceManagement',
      addressName: '类型管理',
      adminBoolean: false,
      cssBox: '',
      selectBoolean: false,
    }
  },
  created() {
    this.getImgUrl()
    // this.cssBox = window.GLOBAL.VUE_BGC
    this.cssBox = localStorage.getItem('skin')
    if (this.cssBox == 'white') {
      this.loadStyle('./bright.css')
    } else {
      this.loadStyle('./dark.css')
    }
  },
  methods: {
    async getImgUrl() {
      const res = await getImgPath()
      console.log('res++=', res)
      if (res.success) {
        this.$store.dispatch('function/get_getImgUrl', res.result)
      }
    },
    addRouter(val) {
      this.pathURL = val
      console.log(val)
      if (val == 'userManagement') {
        this.$refs.refLeftTree.querySysUserGroupTree()
        this.adminBoolean = true
      } else {
        this.adminBoolean = false
      }
    },
    addName(val) {
      this.addressName = val
    },
    removejscssfile(filename, filetype) {
      var targetelement = filetype == 'js' ? 'script' : filetype == 'css' ? 'link' : 'none'
      var targetattr = filetype == 'js' ? 'src' : filetype == 'css' ? 'href' : 'none'
      var allsuspects = document.getElementsByTagName(targetelement)
      for (var i = allsuspects.length; i >= 0; i--) {
        if (allsuspects[i] && allsuspects[i].getAttribute(targetattr) != null && allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1) allsuspects[i].parentNode.removeChild(allsuspects[i])
      }
    },
    loadStyle(url) {
      var link = document.createElement('link')
      link.rel = 'stylesheet'
      link.type = 'text/css'
      link.href = url
      var head = document.getElementsByTagName('head')[0]
      head.appendChild(link)
    },
    setCss() {
      this.pathURL = 'resourceManagement'
      this.addressName = '设备类型管理'
      this.selectBoolean = !this.selectBoolean
      if (this.cssBox == 'white') {
        this.cssBox = 'black'
        localStorage.setItem('skin', this.cssBox)
        this.loadStyle('./dark.css')
        window.setTimeout(() => {
          this.removejscssfile('bright.css', 'css')
        }, 100)
      } else {
        this.cssBox = 'white'
        localStorage.setItem('skin', this.cssBox)
        this.loadStyle('./bright.css')
        window.setTimeout(() => {
          this.removejscssfile('dark.css', 'css')
        }, 100)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.addressBGImg1 {
  width: 20px;
  height: 20px;
  background: url('../assets/img/address.jpg') no-repeat center center !important;
  background-size: 100% 100% !important;
  margin-right: 5px;
}
.addressBGImg2 {
  width: 20px;
  height: 20px;
  background: url('../assets/img/address1.png') no-repeat center center !important;
  background-size: 100% 100% !important;
  margin-right: 5px;
}
.container_default {
  width: 100%;
  height: 100%;
  padding: 10px 10px 10px 10px;
  overflow: hidden;
  background: linear-gradient(to bottom, var(--allBgc1), var(--allBgc2));
}
.container {
  width: 100%;
  display: flex;
  overflow: hidden;
  height: 90%;
}
.left_title {
  display: inline-block;
}
.left_tree {
  width: 8rem;
  display: inline-block;
  margin: 0px 20px;
  border: 1px solid var(--borderColor2);
  background-color: var(--bgColor2);
  border-radius: 6px;
  // overflow: auto;
  // height: 680px;
}
.left_tree_mgl_20 {
  margin-left: 20px;
}
.right_table {
  width: 100%;
  overflow: hidden;
  overflow-y: auto;
  margin-right: 24px;
}
.container_default_top {
  padding: 10px 0px 20px 0px;
  color: var(--fontColor1);
  font-size: 14px;
  // height: 100%;
  img {
    margin-right: 10px;
    vertical-align: middle;
  }
  span {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>

根据不同的参数载入不同的css

点击切换css的方法