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 相关文章推荐
Ext JS Grid在IE6 下宽度的问题解决方法
Feb 15 Javascript
javascript获取当前日期时间及其它操作函数
Jan 11 Javascript
鼠标焦点离开文本框时验证的js代码
Jul 19 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
Oct 30 Javascript
bootstrap datepicker 与bootstrapValidator同时使用时选择日期后无法正常触发校验的解决思路
Sep 28 Javascript
漂亮实用的页面loading(加载)封装代码
Feb 03 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
jQuery实现的简单前端搜索功能示例
Oct 28 jQuery
vue项目首屏加载时间优化实战
Apr 23 Javascript
解决mui框架中switch开关通过js控制开或者关状态时小圆点不动的问题
Sep 03 Javascript
如何通过shell脚本自动生成vue文件详解
Sep 10 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
VML绘图板②脚本--VMLgraph.js、XMLtool.js
2006/10/09 PHP
第八节--访问方式
2006/11/16 PHP
PHP提示Notice: Undefined variable的解决办法
2012/11/24 PHP
php生成EAN_13标准条形码实例
2013/11/13 PHP
smarty内置函数capture用法分析
2015/01/22 PHP
php微信公众平台开发类实例
2015/04/01 PHP
PHP文件操作详解
2016/12/30 PHP
PHP异步进程助手async-helper
2018/02/05 PHP
浅谈PHP进程管理
2019/03/08 PHP
JavaScript的document对象和window对象详解
2010/12/30 Javascript
zShowBox 图片放大展示jquery版 兼容性
2011/09/24 Javascript
js中的布尔运算符使用介绍
2013/11/20 Javascript
单击和双击事件的冲突处理示例代码
2014/04/03 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
js实现同一个页面多个渐变效果的方法
2015/04/10 Javascript
JavaScript实现简单的拖动效果
2016/07/02 Javascript
vue多种弹框的弹出形式的示例代码
2017/09/18 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
vue基础之事件简写、事件对象、冒泡、默认行为、键盘事件实例分析
2019/03/11 Javascript
VUE+elementui组件在table-cell单元格中绘制微型echarts图
2020/04/20 Javascript
JavaScript实现切换多张图片
2021/01/27 Javascript
[05:37]DOTA2-DPC中国联赛 正赛 Elephant vs iG 选手采访
2021/03/11 DOTA
Python实现动态图解析、合成与倒放
2018/01/18 Python
Django+Ajax+jQuery实现网页动态更新的实例
2018/05/28 Python
Django项目中model的数据处理以及页面交互方法
2018/05/30 Python
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
澳大利亚儿童鞋在线:The Trybe
2019/07/16 全球购物
保加利亚运动鞋购物网站:SneakerStudio.bg
2020/12/23 全球购物
保卫科工作岗位职责
2014/03/01 职场文书
落实八项规定专题民主生活会对照检查材料
2014/09/15 职场文书
爱情保证书
2015/01/17 职场文书
指导教师推荐意见
2015/06/05 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
js中Map和Set的用法及区别实例详解
2022/02/15 Javascript