展示类微信小程序_vue怎么依据网站路由判断页面

发布时间:2021-01-08 11:40 作者:jianzhan

摘要: vue怎样依据网站路由器分辨网页页面主题风格色详细说明 本文关键给大伙儿详细介绍了有关vue怎样依据网站路由器分辨网页页面主题风格色的有关材料,原文中根据实例编码详细

vue如何根据网站路由判断页面主题色详解       这篇文章主要给大家介绍了关于vue如何根据网站路由判断页面主题色的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

前言

本文主要介绍的是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 

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对凡科的支持。

  • 做一个手机微信微信小程

    模拟题目:做一个手机上手机微信手机微信微信小程序商城系统系统软件多少钱钱? 网编把握到,手机上手机微信手机微信微信小程序变为当下火爆话题讨论探讨,下面从很多方面来谈

  • 中国航空公司互连网制造

    “我国航空公司企业互联网生产制造制造行业处于爆发式提升前夜,未来提升发展趋势发展潜力巨大。”6月22日,修仙航空公司企业电子器件器件商务接待招待较为比较有限公司经理负

  • 无锡小禾呈科技 | 制作一

    随着着手机微信微信小程序越来越越越健全,十分多企业必须想一款所属于本身的手机微信微信小程序。可是,手机微信微信小程序公布之前,有很多难点都是务必关注的。昨天给大家

  • 多店家商家微信小程序商

    模拟题目:多商家店家手机微信微信小程序商城系统系统软件怎样做?手机微信微信小程序开实体线店怎样进行? 商家入驻型的手机微信微信小程序是如何吸引住住的呢? 简单地来说就

  • 剪发店应当怎样与手机微

    移动互联网网网的发展趋势发展趋势发展趋势,造成了许多高效率率的连接专用型专用工具。许多独立自主创业者头昏头晕眼花缭乱的同时,可能没有意识到,每一种新的专用型专用工