需求:

不同品牌对应不同版本配色

做法:

根据域名带的参数判断进入哪个品牌,对应哪个版本

在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 根据网站路由判断页面主题色的更多相关文章

  1. Vue-router路由判断页面是否登录,未登录跳转到登录页面

    在index.js中 //定义路由 const router = new Router({ routes, strict: process.env.NODE_ENV !== 'production', ...

  2. Vue-router路由判断页面未登录跳转到登录页面

    router.beforeEach((to, from, next) => { if (to.matched.some(record => record.meta.requireAuth) ...

  3. 使用 css/less 动态更换主题色(换肤功能)

    前言 说起换肤功能,前端肯定不陌生,其实就是颜色值的更换,实现方式有很多,也各有优缺点 一.看需求是什么 一般来说换肤的需求分为两种: 1. 一种是几种可供选择的颜色/主题样式,进行选择切换,这种可供 ...

  4. vue项目中引入element-ui时,如何更改主题色

    在我们做项目时,我们经常会遇到切换主题色的功能,下面我们就来说一下通过颜色选择器我们就能改变项目的主题颜色 代码如下: 颜色选择器所在组件: top-theme.vue内容如下: <templa ...

  5. 「Vue」起步 - vue-router路由与页面间导航

    vue-router 我们知道路由定义了一系列访问的地址规则,路由引擎根据这些规则匹配找到对应的处理页面,然后将请求转发给页进行处理.可以说所有的后端开发都是这样做的,而前端路由是不存在"请 ...

  6. vue使用改变element-ui主题色

    每个项目的主题色一般都不一样,直接用element-ui的默认主题色似乎有点不合适,还需要自己一个一个的找元素class名然后在修改样式,非常麻烦,还容易影响到包含该类名的其他元素样式,所以需要自定义 ...

  7. vue如何配置路由 、获取路由的参数、部分刷新页面、缓存页面

    vue如何配置路由 .获取路由的参数.部分刷新页面.缓存页面:http://www.mamicode.com/info-detail-1941546.html vue-router传递参数的几种方式: ...

  8. Vue 实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案

    Vue实现动态路由及登录&404页面跳转控制&页面刷新空白解决方案   by:授客 QQ:1033553122   开发环境   Win 10   Vue 2.9.6   node-v ...

  9. 如何机智判断页面是刷新还是关闭,背景:vue项目,需求:关闭页面,下次直接跳到登陆页

    最近项目有这么个需求:要在关闭当前系统的窗口的时候,退出登录, 因为如果不退出登录可能存在安全风险,其实我想说,电脑没事别借给别人活着离开工位记得一定要锁屏,其实我们设置了cookie失效时间的,过了 ...

随机推荐

  1. Linux ALSA声卡驱动之六:ASoC架构中的Machine

    前面一节的内容我们提到,ASoC被分为Machine.Platform和Codec三大部分,其中的Machine驱动负责Platform和Codec之间的耦合以及部分和设备或板子特定的代码,再次引用上 ...

  2. Api基类

    基类 class BaseController extends Controller{ public $outData = ['code'=>0,'msg'=>'ok']; public ...

  3. RxJava使用介绍

    主讲人:阳石柏 RxJava基本概念 背压概念介绍 RxJava 2.0版本介绍及更新 一.RxJava基本概念 RxJava 在 GitHub 主页上的自我介绍是 “a library for co ...

  4. 杂项-Java:JMX

    ylbtech-杂项-Java:JMX 1.返回顶部 1. JMX(Java Management Extensions,即Java管理扩展)是一个为应用程序.设备.系统等植入管理功能的框架.JMX可 ...

  5. Android属性之build.prop生成过程分析(转载)

    转自: http://www.cnblogs.com/myitm/archive/2011/12/01/2271032.html 本文简要分析一下build.prop是如何生成的.Android的bu ...

  6. 微信小程序调用微信支付

    1,首先我们先缕清支付的整个流程,详见https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=7_4&index=3,第一 ...

  7. Android内存管理(11)*常见JVM回收机制「Java进程内存堆分代,JVM分代回收内存,三种垃圾回收器」

    参考: http://www.blogjava.net/rosen/archive/2010/05/21/321575.html 1,Java进程内存堆分代: 典型的JVM根据generation(代 ...

  8. Linux下安装Wine 运行、卸载 windows程序

    资料 首页 https://www.winehq.org/ 安装 https://www.winehq.org/download/ 教程 https://www.winehq.org/document ...

  9. Elasticsearch之CURL命令的bulk批量操作

    大家,也可去看看我下面的博客 Elasticsearch之批量操作bulk 官网上,是举例了新建一个requests文件. [hadoop@master elasticsearch-]$ pwd /h ...

  10. jsp之servlet模板问题

    如果你在web项目下创建一个Servlet类,那么它会自带很多东西,比如有很多的注释,还有很多out.println()语句等.可能这些东西都不是你需要,这样看起来就会比较的令人不爽.下面的话就教大家 ...