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插件Style定制化方法的分析与比较
May 03 Javascript
jQuery中实现动画效果的基本操作介绍
Apr 16 Javascript
jQuery.extend()的实现方式详解及实例
Jun 29 Javascript
js如何实现设计模式中的模板方法
Jul 23 Javascript
在每个匹配元素的外部插入新元素的方法
Dec 20 Javascript
详解JavaScript的while循环的使用
Jun 03 Javascript
BootStrap 附加导航组件
Jul 22 Javascript
微信小程序 参数传递详解
Oct 24 Javascript
bootstrap表格分页实例讲解
Dec 30 Javascript
从零学习node.js之搭建http服务器(二)
Feb 21 Javascript
VUE利用vuex模拟实现新闻点赞功能实例
Jun 28 Javascript
微信小程序实现卡片层叠滑动效果
Jun 21 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
PHP实现的贪婪算法实例
2017/10/17 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
javascript 广告后加载,加载完页面再加载广告
2010/11/25 Javascript
表头固定(利用jquery实现原理介绍)
2012/11/08 Javascript
javascript异步编程代码书写规范Promise学习笔记
2015/02/11 Javascript
javascript实现网页屏蔽Backspace事件,输入框不屏蔽
2015/07/21 Javascript
实例详解angularjs和ajax的结合使用
2015/10/22 Javascript
通用javascript代码判断版本号是否在版本范围之间
2015/11/29 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
JavaScript中数组添加值和访问值常见问题
2016/02/06 Javascript
JavaScript中匿名函数的用法及优缺点详解
2016/06/01 Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
2016/06/05 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
vue-cli 打包使用history模式的后端配置实例
2018/09/20 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
python基础教程之常用运算符
2014/08/29 Python
实例Python处理XML文件的方法
2015/08/31 Python
python 队列详解及实例代码
2016/10/18 Python
django开发教程之利用缓存文件进行页面缓存的方法
2017/11/10 Python
python中int与str互转方法
2018/07/02 Python
Django 中使用流响应处理视频的方法
2018/07/20 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
使用python实现回文数的四种方法小结
2019/11/24 Python
python pip如何手动安装二进制包
2020/09/30 Python
Anaconda的安装与虚拟环境建立
2020/11/18 Python
Python如何批量生成和调用变量
2020/11/21 Python
pycharm 使用anaconda为默认环境的操作
2021/02/05 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
德国黑胶唱片、街头服装及运动鞋网上商店:HHV
2018/08/24 全球购物
SIMON MILLER官网:洛杉矶的生活方式品牌
2020/10/19 全球购物
财务会计毕业生个人求职信
2014/02/03 职场文书
考研英语复习计划
2015/01/19 职场文书
欠款起诉书范文
2015/05/19 职场文书