关于vue.js如何根据网站路由判断页面主题色教程详解
文章主要给大家介绍了关于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
>
总结
以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值。
-
无相关信息
分享到:
投诉收藏