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

前言

本文主要介绍的是vue根据网站路由判断页面主题色的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧

需求：

不同品牌对应不同版本配色

做法：

根据域名带的参数判断进入哪个品牌，对应哪个版本

在main.js中

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('basecolor')) {
 document.documentelement.style.setproperty("--color", sessionstorage.getitem('basecolor'))
 next()
 }
})
vue.config.productiontip = false
 
/* eslint-disable no-new */
new vue({
 el: '#app',
 router,
 components: { app },
 template: '<app/>'
})

在util.js中

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('basecolor', colorvalue)
 this.$router.push('/login')
 } else if (appu[appu.length-1] === 'resetpassword') {
 colorvalue = styles.getpropertyvalue('--pampers')
 sessionstorage.setitem('basecolor', colorvalue)
 this.$router.push('/login')
 }
}

在app.vue

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

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，如果有疑问大家可以留言交流，谢谢大家对的支持。