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 相关文章推荐
treepanel动态加载数据实现代码
Dec 15 Javascript
js星星评分效果
Jul 24 Javascript
封装好的一个万能检测表单的方法
Jan 21 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
javascript实现label标签跳出循环操作
Mar 06 Javascript
javascript中this关键字详解
Dec 12 Javascript
移动端界面的适配
Jan 11 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
提升页面加载速度的插件InstantClick
Sep 12 Javascript
vue.js给动态绑定的radio列表做批量编辑的方法
Feb 28 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
Nov 28 Javascript
React实现阿里云OSS上传文件的示例
Aug 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
php 模拟POST提交的2种方法详解
2013/06/17 PHP
推荐十款免费 WordPress 插件
2015/03/24 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
php curl 模拟登录并获取数据实例详解
2016/12/22 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
用JavaScript隐藏控件的方法
2009/09/21 Javascript
基于jsTree的无限级树JSON数据的转换代码
2010/07/27 Javascript
原生js拖拽(第一课 未兼容)拖拽思路
2013/03/29 Javascript
jQuery去掉字符串起始和结尾的空格(多种方法实现)
2013/04/01 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
AngularJS通过$http和服务器通信详解
2016/09/21 Javascript
进阶之初探nodeJS
2017/01/24 NodeJs
JavaScript之面向对象_动力节点Java学院整理
2017/06/29 Javascript
bootstrap时间控件daterangepicker使用方法及各种小bug修复
2017/10/25 Javascript
MUI 实现侧滑菜单及其主体部分上下滑动的方法
2018/01/25 Javascript
使用Angular CLI从蓝本生成代码详解
2018/03/24 Javascript
在Bootstrap开发框架中使用dataTable直接录入表格行数据的方法
2018/10/25 Javascript
python通过imaplib模块读取gmail里邮件的方法
2015/05/08 Python
python修改操作系统时间的方法
2015/05/18 Python
详解Python中的序列化与反序列化的使用
2015/06/30 Python
python实现将内容分行输出
2015/11/05 Python
解决pandas使用read_csv()读取文件遇到的问题
2018/06/15 Python
python3.6+django2.0+mysql搭建网站过程详解
2019/07/24 Python
Pytorch基本变量类型FloatTensor与Variable用法
2020/01/08 Python
在python里使用await关键字来等另外一个协程的实例
2020/05/04 Python
Python Flask异步发送邮件实现方法解析
2020/08/01 Python
使用anaconda安装pytorch的实现步骤
2020/09/03 Python
美国猫狗药物和用品网站:PetCareRx
2017/01/05 全球购物
华三通信H3C面试题
2015/05/15 面试题
机关门卫的岗位职责
2014/04/29 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
公司承诺函范文
2015/01/21 职场文书
租赁协议书
2015/01/27 职场文书
大学学习委员竞选稿
2015/11/20 职场文书
Python基础之数据结构详解
2021/04/28 Python
基于Go Int转string几种方式性能测试
2021/04/28 Golang