介绍 import Vue 得到& # 39;vue # 39;
import App 得到& # 39;。/应用# 39;
import router 得到& # 39;。/路由器# 39;
import axios 得到& # 39;axios& # 39;
import MintUI 得到& # 39;mint-ui& # 39;
{},Indicator import 得到& # 39;mint-ui& # 39;
{},getUrls import 得到& # 39;@/util/跑龙套# 39;
import & # 39; mint-ui/lib/style.css& # 39;
import & # 39;。/css/index.css& # 39;
Vue.use(进民退”)//添加请求拦截器,加载
axios.interceptors.request.use (function (配置),{
,Indicator.open ({
,文字:& # 39;加载中…& # 39;,
,spinnerType: & # 39; fading-circle& # 39;
,})
return 配置
}),function (错误),{
,Indicator.close ()
,return Promise.reject(错误)
}
axios.interceptors.response.use (function (配置),{
,Indicator.close ()
return 配置
}),function (错误),{
,return Promise.reject(错误)
}
,
Vue.prototype http 美元;=axios
Vue.prototype.getUrls =geturl
router.beforeEach(下)(从,,=祝辞,{
,if (sessionStorage.getItem (& # 39; basecolor& # 39;)), {
,document.documentElement.style.setProperty (“——color",, sessionStorage.getItem (& # 39; basecolor& # 39;))
下(),
,}
})
Vue.config.productionTip =false
,/*,eslint-disable no-new */Vue ({new
,el: & # 39; #应用# 39;
,路由器,
,组件:{,App },
,模板:& # 39;& lt; App/祝辞& # 39;
}) export function geturl (), {
let colorValue
,let url =window.location.href
,let urlArr =, url.split (& # 39; ? & # 39;
,let appU =, urlArr [0] .split (& # 39;/& # 39;
,let styles =, getComputedStyle (document.documentElement)
,if (appU [appU.length-1],===, & # 39;登录# 39;),{=,,colorValue styles.getPropertyValue(& # 39;——玉兰油# 39;)
,sessionStorage.setItem (& # 39; basecolor& # 39;,, colorValue)
这。router.push美元(& # 39;/登录# 39;
,}else if (appU [appU.length-1],===, & # 39; resetPassword& # 39;), {=,,colorValue styles.getPropertyValue(& # 39;——帮宝适# 39;)
,sessionStorage.setItem (& # 39; basecolor& # 39;,, colorValue)
这。router.push美元(& # 39;/登录# 39;
,}
} & lt; template>
,& lt; div id=癮pp"比;
,& lt; router-view/比;
,& lt;/div>
& lt;/template>
,
& lt; script>
,export default {
,名字:& # 39;应用# 39;
,建立了(){
this.getUrls才能()
,}
}
& lt;/script>
,
& lt; style>
,:root {
,——玉兰油:rgb (237202138);
,——帮宝适:rgb (5183185);
,- - -颜色:# fff;
,}
,{#应用
,高度:100%;
,}
& lt;/style>
这篇文章主要介绍了vue实现根据网站路由判断页面主题色的示例,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获、下面让小编带着大家一起了解一下。
<强>需求:
不同品牌对应不同版本配色
<强>做法:
根据域名带的参数判断进入哪个品牌,对应哪个版本
在主要。js中
在跑龙套。js中
在应用。vue
感谢你能够认真阅读完这篇文章,希望小编分享的“vue实现根据网站路由判断页面主题色的示例”这篇文章对大家有帮助,同时也希望大家多多支持,关注行业资讯频道,更多相关知识等着你来学习!
