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 相关文章推荐
不用ajax实现点击文字即可编辑的方法
Dec 16 Javascript
使用 JScript 创建 .exe 或 .dll 文件的方法
Jul 13 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
Jan 21 Javascript
jQuery事件之键盘事件(ctrl+Enter回车键提交表单等)
May 11 Javascript
js处理表格对table进行修饰
May 26 Javascript
js使用正则实现ReplaceAll全部替换的方法
Aug 22 Javascript
js+html5实现canvas绘制圆形图案的方法
Jun 05 Javascript
微信小程序 chooseImage选择图片或者拍照
Apr 07 Javascript
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
npm 语义版本控制详解
Sep 10 Javascript
在Vue中使用Echarts实例图的方法实例
Oct 10 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
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
PHP实现Unicode编码相互转换的方法示例
2020/11/17 PHP
Smarty缓存机制实例详解【三种缓存方式】
2019/07/20 PHP
Laravel5.4简单实现app接口Api Token认证方法
2019/08/29 PHP
Thinkphp 框架扩展之驱动扩展实例分析
2020/04/27 PHP
一个级联菜单代码学习及removeClass与addClass的应用
2013/01/24 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
浅谈jQuery中setInterval()方法
2015/07/07 Javascript
Highcharts 多个Y轴动态刷新数据的实现代码
2016/05/28 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
require.js与bootstrap结合实现简单的页面登录和页面跳转功能
2017/05/12 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
JS设计模式之状态模式概念与用法分析
2018/02/05 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
nodejs微信开发之接入指南
2019/03/17 NodeJs
vue + any-touch实现一个iscroll 实现拖拽和滑动动画效果
2019/04/08 Javascript
Node.js 的 GC 机制详解
2019/06/03 Javascript
mock.js模拟数据实现前后端分离
2019/07/24 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
python3+PyQt5+Qt Designer实现堆叠窗口部件
2018/04/20 Python
python 设置xlabel,ylabel 坐标轴字体大小,字体类型
2019/07/23 Python
css3实现背景颜色渐变让图片不再是唯一的实现方式
2012/12/18 HTML / CSS
html5的画布canvas——画出弧线、旋转的图形实例代码+效果图
2013/06/09 HTML / CSS
阿迪达斯芬兰官方网站:adidas芬兰
2017/01/30 全球购物
Casadei卡萨蒂官网:意大利奢侈鞋履品牌
2017/10/28 全球购物
期终自我鉴定
2014/02/17 职场文书
《木笛》教学反思
2014/03/01 职场文书
2014年幼儿园植树节活动方案
2014/03/02 职场文书
入党自荐书范文
2014/03/09 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
店长岗位职责
2015/02/11 职场文书
2015年企业团支部工作总结
2015/05/21 职场文书
django项目、vue项目部署云服务器的详细过程
2022/07/23 Servers