vue如何根据网站路由判断页面主题色详解


Posted in Javascript onNovember 02, 2018

前言

本文主要介绍的是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>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
Dec 19 Javascript
Javascript根据指定下标或对象删除数组元素
Dec 21 Javascript
js二维数组排序的简单示例代码
Jan 24 Javascript
PHP中CURL的几个经典应用实例
Jan 23 Javascript
Javascript中的apply()方法浅析
Mar 15 Javascript
javascript去除空格方法小结
May 21 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
Atitit.js的键盘按键事件捆绑and事件调度
Apr 01 Javascript
jQuery中DOM节点的删除方法总结(超全面)
Jan 22 Javascript
angular6根据environments配置文件更改开发所需要的环境的方法
Mar 06 Javascript
vue eslint简要配置教程详解
Jul 26 Javascript
Node.js API详解之 readline模块用法详解
May 22 Javascript
小程序实现列表点赞功能
Nov 02 #Javascript
Vue中的vue-resource示例详解
Nov 02 #Javascript
微信小程序实现列表页的点赞和取消点赞功能
Nov 02 #Javascript
React如何解决fetch跨域请求时session失效问题
Nov 02 #Javascript
element ui table 增加筛选的方法示例
Nov 02 #Javascript
Vue请求JSON Server服务器数据的实现方法
Nov 02 #Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 #Javascript
You might like
Session服务器配置指南与使用经验的深入解析
2013/06/17 PHP
composer.lock文件的作用
2016/02/03 PHP
深入浅出讲解:php的socket通信原理
2016/12/03 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
$.ajax json数据传递方法
2008/11/19 Javascript
Ext JS 4实现带week(星期)的日期选择控件(实战一)
2013/08/21 Javascript
JQuery触发事件例如click
2013/09/11 Javascript
jquery复选框全选/取消示例
2013/12/30 Javascript
jquery ajax请求方式与提示用户正在处理请稍等
2014/09/01 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
JavaScript中Cookie操作实例
2015/01/09 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
Vue中使用vux的配置详解
2017/05/05 Javascript
JS实现图片预览的两种方式
2017/06/27 Javascript
浅析Visual Studio Code断点调试Vue
2018/02/27 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
swiper4实现移动端导航栏tab滑动切换
2020/10/16 Javascript
Python常见格式化字符串方法小结【百分号与format方法】
2016/09/18 Python
Tesserocr库的正确安装方式
2018/10/19 Python
详解python算法之冒泡排序
2019/03/05 Python
详解用python生成随机数的几种方法
2019/08/04 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
外贸业务员求职自荐信分享
2013/09/21 职场文书
艺术应用与设计个人的自我评价
2013/11/23 职场文书
母亲追悼会答谢词
2014/01/27 职场文书
《蚂蚁和蝈蝈》教学反思
2014/02/24 职场文书
医学生临床实习自我评价
2014/03/07 职场文书
中学生关于梦想的演讲稿
2014/08/22 职场文书
党员个人对照检查材料思想汇报
2014/09/16 职场文书
四风问题对照检查材料
2014/09/22 职场文书
2014年个人工作总结报告
2014/11/27 职场文书