微客导航 » 文章资讯 » vue如何根据网站路由判断页面主题色详解

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

2023-09-06 07:24:04 74

前言

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

需求：

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

做法：

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

在main.js中

importVuefrom'vue'
importAppfrom'./App'
importrouterfrom'./router'
importaxiosfrom'axios'
importMintUIfrom'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'
})
returnconfig
}),function(error){
Indicator.close()
returnPromise.reject(error)
}
axios.interceptors.response.use(function(config){
Indicator.close()
returnconfig
}),function(error){
returnPromise.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-disableno-new*/
newVue({
el:'#app',
router,
components:{App},
template:''
})

在util.js中

exportfunctiongetUrls(){
letcolorValue
leturl=window.location.href
leturlArr=url.split('?')
letappU=urlArr[0].split('/')
letstyles=getComputedStyle(document.documentElement)
if(appU[appU.length-1]==='login'){
colorValue=styles.getPropertyValue('--OLAY')
sessionStorage.setItem('basecolor',colorValue)
this.$router.push('/login')
}elseif(appU[appU.length-1]==='resetPassword'){
colorValue=styles.getPropertyValue('--pampers')
sessionStorage.setItem('basecolor',colorValue)
this.$router.push('/login')
}
}

在App.vue

总结

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐