關於vue.js如何根據網站路由判斷頁面主題色教程詳解

anne_zhou發表於2018-11-25

本文主要介紹的是vue根據網站路由判斷頁面主題色的相關內容,分享出來供大家參考學習,下面話不多說了,來一起看看詳細的介紹吧

需求:

不同品牌對應不同版本配色

做法:

根據域名帶的引數判斷進入哪個品牌,對應哪個版本

在main.js中

  1. import Vue from 'vue'
  2. import App from './App'
  3. import router from './router'
  4. import axiOS from 'axios'
  5. import MintUI from 'mint-ui'
  6. import { Indicator } from 'mint-ui'
  7. import { getUrls } from '@/util/utils'
  8. import 'mint-ui/lib/style.css'
  9. import './css/index.css'
  10. Vue.use(MintUI)
  11. //新增請求攔截器 loading
  12. axios.interceptors.request.use(function (config) {
  13.  Indicator.open({
  14.  text: '載入中...',
  15.  spinnerType: 'fading-circle'
  16.  })
  17.  return config
  18. }),function (error) {
  19.  Indicator.close()
  20.  return Promise.reject(error)
  21. }
  22. axios.interceptors.response.use(function (config) {
  23.  Indicator.close()
  24.  return config
  25. }),function (error) {
  26.  return Promise.reject(error)
  27. }
  28.   
  29. Vue.prototype.$http = axios
  30. Vue.prototype.getUrls = getUrls
  31. router.beforeEach((to,from,next) => {
  32.  if (sessionStorage.getItem('basecolor')) {
  33.  document.documentElement.style.setProperty("--color", sessionStorage.getItem('basecolor'))
  34.  next()
  35.  }
  36. })
  37. Vue.config.productionTip = false
  38.   
  39. /* eslint-disable no-new */
  40. new Vue({
  41.  el: '#app',
  42.  router,
  43.  components: { App },
  44.  template: '<App/>'
  45. })

在util.js中

  1. export function getUrls() {
  2.  let colorValue
  3.  let url = window.location.href
  4.  let urlArr = url.split('?')
  5.  let appU = urlArr[0].split('/')
  6.  let styles = getComputedStyle(document.documentElement)
  7.  if (appU[appU.length-1] === 'login') {
  8.  colorValue = styles.getPropertyValue('--OLAY')
  9.  sessionStorage.setItem('basecolor', colorValue)
  10.  this.$router.push('/login')
  11.  } else if (appU[appU.length-1] === 'resetPassword') {
  12.  colorValue = styles.getPropertyValue('--pampers')
  13.  sessionStorage.setItem('basecolor', colorValue)
  14.  this.$router.push('/login')
  15.  }
  16. }

在App.vue

  1. <template>
  2.  <div id="app">
  3.  <router-view/>
  4.  </div>
  5. </template>
  6.   
  7. <script>
  8.  export default {
  9.  name: 'App',
  10.  created() {
  11.   this.getUrls()
  12.  }
  13. }
  14. </script>
  15.   
  16. <style>
  17.  :root {
  18.  --OLAY: rgb(237,202,138);
  19.  --pampers: rgb(5,183,185);
  20.  --color: #fff;
  21.  }
  22.  #app{
  23.  height: 100%;
  24.  }
  25. </style>

總結

以上就是這篇文章的全部內容了,希望本文的內容對大家的學習或者工作具有一定的參考學習價值。

相關文章