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>
vue 根据网站路由判断页面主题色的更多相关文章
- Vue-router路由判断页面是否登录,未登录跳转到登录页面
在index.js中 //定义路由 const router = new Router({ routes, strict: process.env.NODE_ENV !== 'production', ...
- Vue-router路由判断页面未登录跳转到登录页面
router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...
- 使用 css/less 动态更换主题色(换肤功能)
前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...
- vue项目中引入element-ui时,如何更改主题色
在我们做项目时,我们经常会遇到切换主题色的功能,下面我们就来说一下通过颜色选择器我们就能改变项目的主题颜色 代码如下: 颜色选择器所在组件: top-theme.vue内容如下: <templa ...
- 「Vue」起步 - vue-router路由与页面间导航
vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...
- vue使用改变element-ui主题色
每个项目的主题色一般都不一样,直接用element-ui的默认主题色似乎有点不合适,还需要自己一个一个的找元素class名然后在修改样式,非常麻烦,还容易影响到包含该类名的其他元素样式,所以需要自定义 ...
- vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面
vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...
- Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案
Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案 by:授客 QQ:1033553122 开发环境 Win 10 Vue 2.9.6 node-v ...
- 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页
最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...
随机推荐
- Linux ALSA声卡驱动之六:ASoC架构中的Machine
前面一节的内容我们提到,ASoC被分为Machine.Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的代码,再次引用上 ...
- Api基类
基类 class BaseController extends Controller{ public $outData = ['code'=>0,'msg'=>'ok']; public ...
- RxJava使用介绍
主讲人:阳石柏 RxJava基本概念 背压概念介绍 RxJava 2.0版本介绍及更新 一.RxJava基本概念 RxJava 在 GitHub 主页上的自我介绍是 “a library for co ...
- 杂项-Java:JMX
ylbtech-杂项-Java:JMX 1.返回顶部 1. JMX(Java Management Extensions,即Java管理扩展)是一个为应用程序.设备.系统等植入管理功能的框架.JMX可 ...
- Android属性之build.prop生成过程分析(转载)
转自: http://www.cnblogs.com/myitm/archive/2011/12/01/2271032.html 本文简要分析一下build.prop是如何生成的.Android的bu ...
- 微信小程序调用微信支付
1,首先我们先缕清支付的整个流程,详见https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3,第一 ...
- Android内存管理(11)*常见JVM回收机制「Java进程内存堆分代,JVM分代回收内存,三种垃圾回收器」
参考: http://www.blogjava.net/rosen/archive/2010/05/21/321575.html 1,Java进程内存堆分代: 典型的JVM根据generation(代 ...
- Linux下安装Wine 运行、卸载 windows程序
资料 首页 https://www.winehq.org/ 安装 https://www.winehq.org/download/ 教程 https://www.winehq.org/document ...
- Elasticsearch之CURL命令的bulk批量操作
大家,也可去看看我下面的博客 Elasticsearch之批量操作bulk 官网上,是举例了新建一个requests文件. [hadoop@master elasticsearch-]$ pwd /h ...
- jsp之servlet模板问题
如果你在web项目下创建一个Servlet类,那么它会自带很多东西,比如有很多的注释,还有很多out.println()语句等.可能这些东西都不是你需要,这样看起来就会比较的令人不爽.下面的话就教大家 ...