vue如何根據(jù)網(wǎng)站路由判斷頁(yè)面主題色詳解
前言
本文主要介紹的是vue根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的相關(guān)內(nèi)容,分享出來(lái)供大家參考學(xué)習(xí),下面話不多說(shuō)了,來(lái)一起看看詳細(xì)的介紹吧
需求:
不同品牌對(duì)應(yīng)不同版本配色
做法:
根據(jù)域名帶的參數(shù)判斷進(jìn)入哪個(gè)品牌,對(duì)應(yīng)哪個(gè)版本
在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)
//添加請(qǐng)求攔截器 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>
總結(jié)
以上就是這篇文章的全部?jī)?nèi)容了,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,如果有疑問(wèn)大家可以留言交流,謝謝大家對(duì)腳本之家的支持。
相關(guān)文章
在vue中使用css modules替代scroped的方法
本篇文章主要介紹了在vue中使用css modules替代scroped的方法,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)效果的實(shí)現(xiàn)方法
百度了好久都沒(méi)辦法實(shí)現(xiàn)vue中一個(gè)頁(yè)面跳到另一個(gè)頁(yè)面,甚至到google上搜索也是沒(méi)辦法的,最終還是找了高人親自指導(dǎo),所以下面這篇文章主要給大家介紹了關(guān)于Vue頁(yè)面跳轉(zhuǎn)動(dòng)畫(huà)效果的實(shí)現(xiàn)方法,需要的朋友可以參考下2018-09-09
vue實(shí)現(xiàn)頁(yè)面上傳文件夾壓縮后傳給服務(wù)器的操作
這篇文章主要介紹了vue實(shí)現(xiàn)頁(yè)面上傳文件夾壓縮后傳給服務(wù)器的操作,本文通過(guò)示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-09-09
Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題解決
這篇文章主要給大家介紹了關(guān)于Vue對(duì)Element中el-tab-pane添加@click事件無(wú)效問(wèn)題的解決辦法,文中通過(guò)圖文以及代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了Vuejs實(shí)現(xiàn)購(gòu)物車(chē)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-11-11
Vue中div contenteditable 的光標(biāo)定位方法
今天小編就為大家分享一篇Vue中div contenteditable 的光標(biāo)定位方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

