vue實(shí)現(xiàn)根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的示例

這篇文章主要介紹了vue實(shí)現(xiàn)根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的示例，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)公司從2013年成立，是專業(yè)互聯(lián)網(wǎng)技術(shù)服務(wù)公司，擁有項(xiàng)目成都網(wǎng)站設(shè)計(jì)、做網(wǎng)站網(wǎng)站策劃，項(xiàng)目實(shí)施與項(xiàng)目整合能力。我們以讓每一個(gè)夢(mèng)想脫穎而出為使命，1280元靖西做網(wǎng)站,已為上家服務(wù),為靖西各地企業(yè)和個(gè)人服務(wù),聯(lián)系電話:18982081108

需求：

不同品牌對(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: ''
})

在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

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“vue實(shí)現(xiàn)根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的示例”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!

網(wǎng)站題目：vue實(shí)現(xiàn)根據(jù)網(wǎng)站路由判斷頁(yè)面主題色的示例
標(biāo)題鏈接：http://m.jiaotiyi.com/article/gdhgcg.html