vue如何根据网站路由判断页面主题色详解

import Vue from \'vue\'
import App from \'./App\'
import router from \'./router\'
import axios from \'axios\'
import MintUI from \'mint-ui\'
import { Indicator } from \'mint-ui\'
import { getUrls } from \'@/util/utils\'
import \'mint-ui/lib/style.css\'
import \'./css/index.css\'
Vue.use(MintUI)
//添加请求拦截器 loading
axios.interceptors.request.use(function (config) {
 Indicator.open({
 text: \'加载中...\',
 spinnerType: \'fading-circle\'
 })
 return config
}),function (error) {
 Indicator.close()
 return Promise.reject(error)
}
axios.interceptors.response.use(function (config) {
 Indicator.close()
 return config
}),function (error) {
 return Promise.reject(error)
}
 
Vue.prototype.$http = axios
Vue.prototype.getUrls = getUrls
router.beforeEach((to,from,next) => {
 if (sessionStorage.getItem(\' color\')) {
 document.documentElement.style.setProperty(\"--color\", sessionStorage.getItem(\' color\'))
 next()
 }
})
Vue.config.productionTip = false
 
/* eslint-disable no-new */
new Vue({
 el: \'#app\',
 router,
 components: { App },
 template: \'<App/>\'
})

export function getUrls() {
 let colorValue
 let url = window.location.href
 let urlArr = url.split(\'?\')
 let appU = urlArr[0].split(\'/\')
 let styles = getComputedStyle(document.documentElement)
 if (appU[appU.length-1] === \'login\') {
 colorValue = styles.getPropertyValue(\'--OLAY\')
 sessionStorage.setItem(\' color\', colorValue)
 this.$router.push(\'/login\')
 } else if (appU[appU.length-1] === \'resetPassword\') {
 colorValue = styles.getPropertyValue(\'--pampers\')
 sessionStorage.setItem(\' color\', colorValue)
 this.$router.push(\'/login\')
 }
}

<template>
 <div id=\"app\">
 <router-view/>
 </div>
</template>
 
< >
 export default {
 name: \'App\',
 created() {
  this.getUrls()
 }
}
</ >
 
<style>
 :root {
 --OLAY: rgb(237,202,138);
 --pampers: rgb(5,183,185);
 --color: #fff;
 }
 #app{
 height: 100%;
 }
</style>