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 相关文章推荐
基于jquery的横向滚动条(滑动条)
Feb 24 Javascript
javascript数组去重3种方法的性能测试与比较
Mar 26 Javascript
JavaScript实现班级随机点名小应用需求的具体分析
May 12 Javascript
jQuery html()方法使用不了无法显示内容的问题
Aug 06 Javascript
JavaScript中的闭包
Feb 24 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
Apr 22 Javascript
node.js调用Chrome浏览器打开链接地址的方法
May 17 Javascript
IntelliJ IDEA编辑器配置vue高亮显示
Sep 26 Javascript
js+css实现扇形导航效果
Aug 18 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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新手上路(九)
2006/10/09 PHP
destoon实现调用当前栏目分类及子分类和三级分类的方法
2014/08/21 PHP
CentOS安装php v8js教程
2015/02/26 PHP
使用CSS3实现字体颜色渐变的实现
2021/03/09 HTML / CSS
动态加载iframe
2006/06/16 Javascript
javascript定时保存表单数据的代码
2011/03/17 Javascript
javascript结合html5 canvas实现(可调画笔颜色/粗细/橡皮)的涂鸦板
2013/04/27 Javascript
js获取指定日期前后的日期代码
2013/08/20 Javascript
jQuery读取和设定KindEditor值的方法
2013/11/22 Javascript
Angular用来控制元素的展示与否的原生指令介绍
2015/01/07 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
jQuery实现滚动效果
2017/11/17 jQuery
在vue中使用SockJS实现webSocket通信的过程
2018/08/29 Javascript
深入理解与使用keep-alive(配合router-view缓存整个路由页面)
2018/09/25 Javascript
Puppeteer 爬取动态生成的网页实战
2018/11/14 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
[02:27]刀塔重生降临
2015/10/14 DOTA
python遍历数组的方法小结
2015/04/30 Python
tensorflow训练中出现nan问题的解决
2018/02/10 Python
Python 实现网页自动截图的示例讲解
2018/05/17 Python
Python并发之多进程的方法实例代码
2018/08/15 Python
python numpy 矩阵堆叠实例
2020/01/17 Python
使用Python制作新型冠状病毒实时疫情图
2020/01/28 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
Python使用Paramiko控制liunx第三方库
2020/05/20 Python
用HTML5实现鼠标滚轮事件放大缩小图片的功能
2015/06/25 HTML / CSS
Chantelle仙黛尔内衣美国官网:法国第一品牌内衣
2018/07/26 全球购物
馥绿德雅美国官方网站:Rene Furterer头皮护理专家
2019/05/01 全球购物
给护士表扬信
2014/01/19 职场文书
《蒙娜丽莎之约》教学反思
2014/02/27 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
政审证明材料
2015/06/19 职场文书
Python数据分析之pandas函数详解
2021/04/21 Python
分析SQL窗口函数之取值窗口函数
2022/04/21 Oracle