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 相关文章推荐
13 个JavaScript 性能提升技巧分享
Jul 26 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
JavaScript操作cookie类实例
Mar 31 Javascript
Ajax清除浏览器js、css、图片缓存的方法
Aug 06 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
js密码强度实时检测代码
Mar 02 Javascript
使用jQuery.form.js/springmvc框架实现文件上传功能
May 12 Javascript
Javascript 5种方法实现过滤删除前后所有空格
Jun 22 Javascript
jQuery获取table表中的td标签(实例讲解)
Jul 28 jQuery
动态内存分配导致影响Javascript性能的问题
Dec 18 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 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
超神学院:天使彦公认最美的三个视角,网友:我的天使快下凡吧!
2020/03/02 国漫
PHP的开发框架的现状和展望
2007/03/16 PHP
Zend的Registry机制的使用说明
2013/05/02 PHP
大家都应该掌握的PHP关联数组使用技巧
2015/12/25 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
PHP排序算法之快速排序(Quick Sort)及其优化算法详解
2018/04/21 PHP
php上传后台无法收到数据解决方法
2019/10/28 PHP
JQuery的ajax基础上的超强GridView展示
2009/09/18 Javascript
面向对象的Javascript之一(初识Javascript)
2012/01/20 Javascript
javascript 文件的同步加载与异步加载实现原理
2012/12/13 Javascript
jQuery实现图片放大预览实现原理及代码
2013/09/12 Javascript
js弹出div并显示遮罩层
2014/02/12 Javascript
angularJS中router的使用指南
2015/02/09 Javascript
DOM 高级编程
2015/05/06 Javascript
jquery悬浮提示框完整实例
2016/01/13 Javascript
详解JavaScript实现设计模式中的适配器模式的方法
2016/05/18 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
2016/05/21 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
解决Linux无法正常安装与卸载Node.js的方法
2018/01/19 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
初学vue出现空格警告的原因及其解决方案
2019/10/31 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
利用Python破解验证码实例详解
2016/12/08 Python
Python enumerate索引迭代代码解析
2018/01/19 Python
python 文本单词提取和词频统计的实例
2018/12/22 Python
对python中list的五种查找方法说明
2020/07/13 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
Kathmandu澳洲户外商店:新西兰户外运动品牌
2017/11/12 全球购物
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Fossil加拿大官网:化石手表、手袋、首饰及配饰
2019/04/23 全球购物
会计专业求职信范文
2014/03/16 职场文书
学校地质灾害防治方案
2014/06/10 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
redis实现排行榜功能
2021/05/24 Redis
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Win11怎么解除儿童账号限制?Win11解除微软儿童账号限制方法
2022/07/07 数码科技