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 相关文章推荐
让div层随鼠标移动的实现代码 ie ff
Dec 18 Javascript
window.name代替cookie的实现代码
Nov 28 Javascript
利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
Jan 29 Javascript
DOM基础教程之事件类型
Jan 20 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
HTML5基于Tomcat 7.0实现WebSocket连接并实现简单的实时聊天
Oct 31 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
May 11 Javascript
JavaScript两种计时器的实例讲解
Jan 31 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
Aug 20 Javascript
vue 实现路由跳转时更改页面title
Nov 05 Javascript
Vue实现背景更换颜色操作
Jul 17 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
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
php获取Google机器人访问足迹的方法
2015/04/15 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php使用QueryList轻松采集js动态渲染页面方法
2018/09/11 PHP
javascript整除实现代码
2010/11/23 Javascript
JS获取整个页面文档的实现代码
2011/12/15 Javascript
js中生成map对象的方法
2014/01/09 Javascript
node.js中的fs.existsSync方法使用说明
2014/12/17 Javascript
js鼠标滑过图片震动特效的方法
2015/02/17 Javascript
JS如何实现文本框随文本的长度而增长
2015/07/30 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
老生常谈Javascript中的原型和this指针
2016/10/09 Javascript
JavaScript文件的同步和异步加载的实现代码
2017/08/19 Javascript
vue中使用localstorage来存储页面信息
2017/11/04 Javascript
浅谈webpack对样式的处理
2018/01/05 Javascript
微信开发之企业付款到银行卡接口开发的示例代码
2018/09/18 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
python Django模板的使用方法(图文)
2013/11/04 Python
Python创建文件和追加文件内容实例
2014/10/21 Python
Python实现删除文件但保留指定文件
2015/06/21 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python hook监听事件详解
2018/10/25 Python
Python网页正文转换语音文件的操作方法
2018/12/09 Python
python进阶之自定义可迭代的类
2019/08/20 Python
利用Python实现自动扫雷小脚本
2020/12/17 Python
台湾饭店和机票预订网站:Expedia台湾
2016/08/05 全球购物
美国瑜伽服装和装备购物网站:Mukha Yoga
2019/02/22 全球购物
ManoMano英国:欧洲第一家专注于DIY和园艺市场的电商平台
2020/03/12 全球购物
怎么可以提高数据库查询数据的速度
2014/06/28 面试题
实习老师个人总结的自我评价
2013/09/28 职场文书
物业客服专员岗位职责
2013/11/30 职场文书
简历的个人自我评价范文
2014/01/03 职场文书
2019新员工心得体会
2019/06/25 职场文书
详解Python魔法方法之描述符类
2021/05/26 Python