vuetify设置页面默认主题色
前言
最近工作中接到一个任务:
- 项目中分
light和dark两种主题色 - a、b页面默认为
dark - 其他页面默认为
light
项目前端环境:
vue2+js+yarn+vuex+vuetify+element ui
解决思路
-
routerjs中配置路径时进行默认主题设置 -
在左侧
aside点击菜单时,进行主题切换
思路1存在的问题:但是vuetify挂载在vue中,在routerjs中不一定可以获取到
思路2存在的隐患:当路由从其他页面跳转时,就无法检测,比如直接改变导航地址
经过很多尝试,解决了思路1的问题,具体使用看下文
使用方法
1、在a、b路由中设置isDark属性,如下
{path: '/posture',name: 'a',component: () => import('@/views/dashboards/posture/Posture.vue'),meta: {layout: 'content',isDark: true,},},
2、在router.afterEach()中设置默认主题色
router.afterEach(to => {console.log('router', router)// router.app---vue实例router.app.$vuetify.theme.dark = !!to.meta.isDark
})
控制台输出:

vue-router中其他获取vue实例的办法
可以在路由组件内直接定义以下路由导航守卫,但对于个别路由跳转操作方便使用,如果是【默认主题】这种全局改造,使用此会需要在每个页面中都定义一次,代码冗余且复杂,在全局修改时不推荐使用,不过可以学习一下使用方法和原理
组件路由导航守卫使用
比如在assetindex.vue中定义路由方法

控制台打印输出:

这个是官网的示例:
const Foo = {template: `...`,beforeRouteEnter(to, from, next) {// 在渲染该组件的对应路由被 confirm 前调用// 不!能!获取组件实例 `this`// 因为当守卫执行前,组件实例还没被创建},beforeRouteUpdate(to, from, next) {// 在当前路由改变,但是该组件被复用时调用// 举例来说,对于一个带有动态参数的路径 /foo/:id,在 /foo/1 和 /foo/2 之间跳转的时候,// 由于会渲染同样的 Foo 组件,因此组件实例会被复用。而这个钩子就会在这个情况下被调用。// 可以访问组件实例 `this`},beforeRouteLeave(to, from, next) {// 导航离开该组件的对应路由时调用// 可以访问组件实例 `this`}
}
导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave守卫。 - 调用全局的
beforeEach守卫。 - 在重用的组件里调用
beforeRouteUpdate守卫 (2.2+)。 - 在路由配置里调用
beforeEnter。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter。 - 调用全局的
beforeResolve守卫 (2.5+)。 - 导航被确认。
- 调用全局的
afterEach钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter守卫中传给next的回调函数,创建好的组件实例会作为回调函数的参数传入。
相关文章:
vuetify设置页面默认主题色
前言 最近工作中接到一个任务: 项目中分light和dark两种主题色a、b页面默认为dark其他页面默认为light 项目前端环境: vue2jsyarnvuexvuetifyelement ui 解决思路 routerjs中配置路径时进行默认主题设置 在左侧aside点击菜单时,进行主题切…...
【Python入门第二十三天】Python 继承
Python 继承 继承允许我们定义继承另一个类的所有方法和属性的类。 父类是继承的类,也称为基类。 子类是从另一个类继承的类,也称为派生类。 创建父类 任何类都可以是父类,因此语法与创建任何其他类相同: 实例 创建一个名为…...
C#中,读取一个或多个文件内容的方法
读取一个或多个文件内容的方法 在C#中,可以使用File.ReadAllLines方法一次读取多个文件中的所有行内容。例如,以下代码读取了两个文件中的所有行内容,然后将它们合并在一起: string[] file1Lines File.ReadAllLines("file1…...
1 基于神经辐射场(neural Radiance Fileds, Nerf)的三维重建- 简介
Nerf简介 Nerf(neural Radiance Fileds) 为2020年ICCV上提出的一个基于隐式表达的三维重建方法,使用2D的 Posed Imageds 来生成(表达)复杂的三维场景。现在越来越多的研究人员开始关注这个潜力巨大的领域,也…...
水果FLStudio21.0.0中文版全能数字音乐工作站DAW
FL Studio 21.0.0官方中文版重磅发布纯正简体中文支持,更快捷的音频剪辑及素材管理器,多样主题随心换!Mac版新增对苹果M2/1家族芯片原生支持。编曲、剪辑、录音、混音,20余年的技术积淀和实力研发,FL Studio 已经从电音…...
【GlobalMapper精品教程】055:GM坐标转换器的巧妙使用
GM软件提供了一个简单实用的坐标转换工具,可以实现地理坐标和投影坐标之间的高斯正反算及多种转换计算。 文章目录 一、坐标转换器认识二、坐标转换案例1. 地理坐标←→地理坐标2. 地理坐标←→投影坐标三、在输出坐标上创建新的点四、其他转换工具的使用一、坐标转换器认识 …...
C语言之中rand()函数是如何实现的
rand()函数是一个C标准库中的随机数生成函数,用于生成一个范围在0到RAND_MAX之间的伪随机数。RAND_MAX是一个常量,它是随机数的最大值,通常被定义为32767。 rand()函数的实现原理可以概括为以下几个步骤: 初始化随机数生成器 在…...
winform控件PropertyGrid的应用(使运行中的程序能像vistual studio那样设置控件属性)
上周在看别人写的上位机demo代码时,发现创建的项目模板是"Windows 窗体控件库"(如下图) 生成的项目结构像自定义控件库,没有程序入口方法Main,但却很神奇能调试,最后发现原来Vistual Studio启动了一个外挂程序UserContr…...
SBUS的协议详解
SBUS 1.串口配置: 100k波特率, 8位数据位(在stm32中要选择9位), 偶校验(EVEN), 2位停止位, 无控流,25个字节, 2.协议格式: [startbyte] [data1][data2]……...
【PyTorch】教程:torch.nn.Hardshrink
torch.nn.Hardshrink CLASS torch.nn.Hardshrink(lambd0.5) 参数 lambd ([float]) – the λ\lambdaλ 默认为 0.5 定义 HardShrink(x){x,if x>λx,if x<−λ0,otherwise \text{HardShrink}(x) \begin{cases} x, & \text{ if } x > \lambda \\ x, & \text{…...
JavaScript 函数参数
JavaScript 函数对参数的值(arguments)没有进行任何的检查。JavaScript 函数参数与大多数其他语言的函数参数的区别在于:它不会关注有多少个参数被传递,不关注传递的参数的数据类型。函数显式参数与隐藏参数(arguments)在先前的教程中,我们已…...
【C】标准IO库函数
fopen/fclose #include <stdio.h>FILE *fopen(const char *path, const char *mode); 返回值:成功返回文件指针,出错返回NULL并设置errnoint fclose(FILE *fp); 返回值:成功返回0,出错返回EOF并设置errnomode参数是一个字符…...
http客户端Feign
Feign替代RestTemplate RestTemplate方式调用存在的缺陷 String url"http://userservice/user/"order.getUserId();User user restTemplate.getForObject(url, User.class); 代码可读性差,变成体验不统一; 参数复杂的时候URL难以维护。 &l…...
如何在Java中使用枚举类:从入门到进阶
枚举类是Java中一种特殊的数据类型,它允许我们将一组有限的值作为一组常量来使用,这些常量在代码中具有固定的名称和类型。在Java中,枚举类通常用于代表状态、选项和类别等具有离散值的变量。本篇博客将深入探讨Java中的枚举类,包…...
操作系统(1.2)--引论
目录 一、操作系统的基本特性 1.并发性 1.1 并行与并发 1.2 引入进程 2.共享性 2.1 互斥共享方式 2.3 同时访问方式 3.虚拟 3.1 时分复用技术 4. 异 步 二、操作系统的主要功能 1.处理机管理功能 1.1 进程控制 1.2 进程同步 1.3 进程通信 1.4 调度 2. 内…...
【Linux】 shell if的[]和[[]]区别
文章目录[]和test[]和[[]]区别总结参考[]和test Shell中的 test 命令用于检查某个条件是否成立,它可以进行数值、字符和文件三个方面的测试 test常用于 if ,作为判断条件,if test等价于 if [ ],因此,test和[] 内的内…...
利用flask解析海康摄像头视频
利用flask解析海康摄像头视频利用flask解析海康摄像头和大华摄像头的视频一、安装依赖包二、获取海康摄像头视频流三、将视频流输出到Web页面四、 创建HTML模板文件利用flask解析海康摄像头和大华摄像头的视频 作为AI智能的一种应用场景,视频监控系统已经在各个行业…...
./docker-compose.yml‘ is invalid
文章目录前言提示原因版本太低解决方法更新删除原来不能执行的/usr/local/bin/docker-compose下载安装docker-compose添加权限前言 安装ctfd过程中的一些报错 rootubuntu:/CTFd# docker-compose up -d ERROR: The Compose file ./docker-compose.yml is invalid because: net…...
Java 流程控制
条件/选择结构 if if(条件表达式){// 表达式为 true 时,执行该代码块 }if(true) {System.out.println("hello"); }if else if(条件表达式){// 表达式为 true 时,执行该代码块 } else {// 表达式为 false 时,执行该代码块 }if(1 …...
边界无限入选首届“网络安全高成长性企业”并荣获“勇创之星”
近日,由工业和信息化部、四川省人民政府主办的“2023年中国网络和数据安全产业高峰论坛网络安全产融合作分论坛”在成都举行,论坛上公布了“2022年度网络安全高成长性企业”名单。云原生安全、应用安全“灵动智御”理念创领者北京边界无限科技有限公司&a…...
安卓蓝牙开发避坑指南:Bluedroid初始化流程中的5个关键细节
安卓蓝牙开发避坑指南:Bluedroid初始化流程中的5个关键细节 在安卓蓝牙协议栈开发中,Bluedroid的初始化流程是系统与蓝牙硬件建立通信的基础桥梁。许多看似随机的蓝牙功能异常,往往源于初始化阶段某些参数的微妙配置差异。本文将深入剖析五个…...
Kaggle Notebook中文乱码终结者:3分钟搞定Matplotlib字体配置(附Noto Sans CJK全流程)
Kaggle Notebook中文乱码终结者:3分钟搞定Matplotlib字体配置(附Noto Sans CJK全流程) 在数据可视化过程中,中文显示问题一直是困扰许多Kaggle用户的痛点。当你在Notebook中满怀期待地运行代码,却发现图表中的中文变成…...
麦橘超然Flux控制台快速体验:输入文字秒出高清图片
麦橘超然Flux控制台快速体验:输入文字秒出高清图片 1. 为什么选择Flux控制台 如果你正在寻找一个简单高效的AI图像生成工具,麦橘超然Flux控制台值得考虑。这个基于DiffSynth-Studio构建的Web服务,集成了majicflus_v1模型,通过fl…...
RouterOS L2TP服务器搭建与安全优化指南
1. L2TP协议基础与RouterOS适配性 L2TP协议全称为Layer 2 Tunneling Protocol,是一种工作在OSI模型第二层的隧道协议。我第一次接触这个协议是在2015年为企业部署远程办公系统时,当时发现它相比PPTP有着明显的安全优势。简单来说,L2TP就像是在…...
OpenClaw自动化写作助手:基于GLM-4.7-Flash的草稿生成与润色
OpenClaw自动化写作助手:基于GLM-4.7-Flash的草稿生成与润色 1. 为什么需要自动化写作助手 作为一个长期与文字打交道的内容创作者,我经常面临这样的困境:明明有好的选题灵感,却卡在初稿阶段耗费大量时间;或是写完后…...
3类被90%开发者忽略的农田图像噪声——基于ISO 17202-2标准的Python去噪实战手册
第一章:农田图像噪声的认知革命与ISO 17202-2标准全景解读传统农业视觉系统长期将图像噪声视为需“压制”的干扰项,而ISO 17202-2:2023《农业遥感图像质量评估—第2部分:噪声建模与语义敏感性分级》首次确立噪声作为农田场景的**可解释性特征…...
高效管理惠普OMEN游戏本:OmenSuperHub全面解析与实战指南
高效管理惠普OMEN游戏本:OmenSuperHub全面解析与实战指南 【免费下载链接】OmenSuperHub 项目地址: https://gitcode.com/gh_mirrors/om/OmenSuperHub OmenSuperHub是一款专为惠普OMEN系列游戏本设计的轻量级系统管理工具,它通过替代原厂Omen Ga…...
从LLaVA到Stable Diffusion:多模态融合选拼接还是交叉注意力?一张图帮你做技术选型
多模态融合技术选型指南:拼接与交叉注意力的深度对比与实践策略 在构建现代多模态AI系统时,工程师们常常面临一个关键决策点:如何有效地融合来自不同模态的信息?想象一下,你正在开发一个智能医疗影像分析系统ÿ…...
工业视觉代码交付总被退回?(甲方验收必查的6项硬性指标:实时性≤35ms、重复精度±0.015px、抗电磁干扰日志完备性)
第一章:工业视觉代码交付失败的典型归因分析工业视觉系统在产线部署阶段频繁遭遇代码交付失败,其根本原因往往并非算法性能不足,而是工程化落地环节存在系统性疏漏。以下从环境适配、数据闭环、接口契约三个维度展开典型归因。运行时环境不一…...
开源工具wxappUnpacker:微信小程序逆向解析实战指南
开源工具wxappUnpacker:微信小程序逆向解析实战指南 【免费下载链接】wxappUnpacker 项目地址: https://gitcode.com/gh_mirrors/wxappu/wxappUnpacker 模块一:工具定位与价值——小程序开发的逆向工程利器 完成本节学习后你将能够:…...
