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设置元素的readonly和disabled的写法
Sep 22 Javascript
Js 去掉字符串中的空格(实现代码)
Nov 19 Javascript
如何从jQuery的ajax请求中删除X-Requested-With
Dec 11 Javascript
JavaScript设计模式之代理模式介绍
Dec 28 Javascript
jQuery找出网页上最高元素的方法
Mar 20 Javascript
如何解决hover在ie6中的兼容性问题
Dec 15 Javascript
Bootstrap的基本应用要点浅析
Dec 19 Javascript
JavaScript数组去重的6个方法
Jan 21 Javascript
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
Vue项目中如何引入icon图标
Mar 28 Javascript
r.js来合并压缩css文件的示例
Apr 26 Javascript
layui下拉列表select实现可输入查找的方法
Sep 28 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入门学习笔记之一
2010/10/12 PHP
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js中AppendChild与insertBefore的用法详细解析
2013/12/16 Javascript
jquery验证邮箱格式并显示提交按钮
2015/11/07 Javascript
详解AngularJS中的表单验证(推荐)
2016/11/17 Javascript
angular.JS实现网页禁用调试、复制和剪切
2017/03/31 Javascript
Node.js开发第三方微信公众平台
2017/06/05 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
解决IE7中使用jQuery动态操作name问题
2017/08/28 jQuery
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
2018/01/09 Javascript
vue路由拦截及页面跳转的设置方法
2018/05/24 Javascript
VUE基于NUXT的SSR 服务端渲染
2018/11/30 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
openlayers实现地图测距测面
2020/09/25 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Python入门篇之文件
2014/10/20 Python
使用Python脚本在Linux下实现部分Bash Shell的教程
2015/04/17 Python
Python中数组,列表:冒号的灵活用法介绍(np数组,列表倒序)
2018/04/18 Python
Python3.5 Json与pickle实现数据序列化与反序列化操作示例
2019/04/29 Python
Django发送邮件功能实例详解
2019/09/02 Python
使用Python的networkx绘制精美网络图教程
2019/11/21 Python
Python opencv相机标定实现原理及步骤详解
2020/04/09 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
Python使用pyexecjs代码案例解析
2020/07/13 Python
python 读取yaml文件的两种方法(在unittest中使用)
2020/12/01 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
运动会跳远广播稿
2014/02/04 职场文书
学校庆元旦歌咏比赛主持词
2014/03/18 职场文书
电话客服工作职责
2014/07/27 职场文书
城管执法人员纪律作风整顿思想汇报
2014/09/13 职场文书
启迪人心的励志语录:脾气永远不要大于本事
2020/01/02 职场文书
关于html选择框创建占位符的问题
2021/06/09 HTML / CSS
手把手教你用SpringBoot将文件打包成zip存放或导出
2021/06/11 Java/Android
bat批处理之字符串操作的实现
2022/03/16 Python