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代码
Mar 01 Javascript
JavaScript类库D
Oct 24 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
js 字符串转换成数字的三种方法
Mar 23 Javascript
JavaScript制作简单的日历效果
Mar 10 Javascript
jQuery获取table行数并输出单元格内容的实现方法
Jun 30 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
原生js实现弹出层效果
Jan 20 Javascript
JavaScript+CSS相册特效实例代码
Sep 07 Javascript
vue中实现先请求数据再渲染dom分享
Mar 17 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
javascript中layim之查找好友查找群组
Feb 06 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
PHP投票系统防刷票判断流程分析
2012/02/04 PHP
PHP对接微信公众平台消息接口开发流程教程
2014/03/25 PHP
phpword插件导出word文件时中文乱码问题处理方案
2014/08/19 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP 魔术变量和魔术函数详解
2015/02/25 PHP
jquery 设置元素相对于另一个元素的top值(实例代码)
2013/11/06 Javascript
JS小游戏之仙剑翻牌源码详解
2014/09/25 Javascript
jQuery实现简洁的导航菜单效果
2015/11/23 Javascript
jQuery基本选择器之标签名选择器
2016/09/03 Javascript
JS对大量数据进行多重过滤的方法
2016/11/04 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
js实现开启密码大写提示
2016/12/21 Javascript
jQuery实现手机上输入后隐藏键盘功能
2017/01/04 Javascript
完美实现js焦点轮播效果(二)(图片可滚动)
2017/03/07 Javascript
你点的 ES6一些小技巧,请查收
2018/04/25 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
修改Nodejs内置的npm默认配置路径方法
2018/05/13 NodeJs
Element input树型下拉框的实现代码
2018/12/21 Javascript
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
小程序实现录音上传功能
2019/11/22 Javascript
[01:00]DOTA2 store: Collection of Artisan's Wonders
2015/08/12 DOTA
Python中Threading用法详解
2017/12/27 Python
对python中的xlsxwriter库简单分析
2018/05/04 Python
Python工厂函数用法实例分析
2018/05/14 Python
python3中pip3安装出错,找不到SSL的解决方式
2019/12/12 Python
Python如何绘制日历图和热力图
2020/08/07 Python
python+requests实现接口测试的完整步骤
2020/10/27 Python
用HTML5 实现橡皮擦的涂抹效果的教程
2015/05/11 HTML / CSS
周鸿祎:教你写创业计划书
2013/12/30 职场文书
中式面点餐厅创业计划书
2014/01/29 职场文书
工程类专业自荐信范文
2014/03/09 职场文书
委托书范文
2014/04/02 职场文书
给领导敬酒词
2015/08/12 职场文书
基督教追悼会答谢词
2015/09/29 职场文书
实用干货:敬酒词大全,帮你应付各种场合
2019/11/21 职场文书
导游词之安徽巢湖
2019/12/26 职场文书