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 相关文章推荐
JavaScript的9个陷阱及评点分析
May 16 Javascript
jQuery.fn和jQuery.prototype区别介绍
Oct 05 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
Jun 06 Javascript
微信小程序 progress组件详解及实例代码
Oct 25 Javascript
利用Chrome DevTools直接调试Node.js和JavaScript的方法详解(并行)
Feb 16 Javascript
javascript性能优化之分时函数的介绍
Mar 28 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
微信小程序页面间跳转传参方式总结
Jun 13 Javascript
jQuery 查找元素操作实例小结
Oct 02 jQuery
html-webpack-plugin修改页面的title的方法
Jun 18 Javascript
如何使用 vue-cli 创建模板项目
Nov 19 Vue.js
小程序实现列表点赞功能
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通过COM使用ADODB的简单例子
2006/12/31 PHP
gd库图片下载类实现下载网页所有图片的php代码
2012/08/20 PHP
PHP utf-8编码问题,utf8编码,数据库乱码,页面显示输出乱码
2013/04/08 PHP
PHP+Mysql树型结构(无限分类)数据库设计的2种方式实例
2014/07/15 PHP
php的crc32函数使用时需要注意的问题(不然就是坑)
2015/04/21 PHP
thinkPHP实现MemCache分布式缓存功能
2016/03/23 PHP
php简单实现数组分页的方法
2016/04/30 PHP
phalcon model在插入或更新时会自动验证非空字段的解决办法
2016/12/29 PHP
PHP+MySQL实现模糊查询员工信息功能示例
2018/06/01 PHP
Javascript的常规数组和关联数组对比小结
2012/05/24 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
node.js中的querystring.unescape方法使用说明
2014/12/10 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
关于JS中prototype的理解
2015/09/07 Javascript
js中不同的height, top的区别对比
2015/09/24 Javascript
最全面的百度地图JavaScript离线版开发
2016/09/10 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
bootstrap多种样式进度条展示
2016/12/20 Javascript
小程序实现左滑删除效果
2019/07/25 Javascript
浅谈pycharm下找不到sqlalchemy的问题
2018/12/03 Python
sklearn-SVC实现与类参数详解
2019/12/10 Python
6行Python代码实现进度条效果(Progress、tqdm、alive-progress​​​​​​​和PySimpleGUI库)
2020/01/06 Python
matplotlib之pyplot模块之标题(title()和suptitle())
2021/02/22 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Hanro官网:奢华男士和女士内衣、睡衣和家居服
2018/10/25 全球购物
香港草莓网:Strawberrynet香港
2019/05/10 全球购物
迪奥美国官网:Dior美国
2019/12/07 全球购物
金融专业大学生职业生涯规划范文
2014/01/16 职场文书
2014年迎新年活动方案
2014/02/19 职场文书
实习单位评语
2014/04/26 职场文书
2015会计试用期工作总结
2014/12/12 职场文书
预备党员转正材料
2014/12/19 职场文书
2015年“7.11”世界人口日宣传活动方案
2015/05/06 职场文书
班级班风口号大全
2015/12/25 职场文书
Python必备技巧之函数的使用详解
2022/04/04 Python