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…...
别再让收款语音卡顿!UniApp + WebSocket 实现流畅支付播报的完整避坑指南
UniApp WebSocket 支付语音播报实战:从性能优化到高并发处理 在移动支付场景中,实时语音播报不仅是用户体验的关键环节,更是商户经营效率的重要保障。想象这样的场景:高峰时段,收银台前排队等待的顾客,收银…...
告别标注烦恼:用DINOv2自监督模型,在Intel Image数据集上3个epoch实现93%准确率
零标注成本实战:DINOv2自监督模型在Intel Image数据集上的高效迁移方案 当我在实验室第一次尝试用传统方法训练一个图像分类模型时,面对数千张需要手动标注的图片,几乎要放弃这个课题。直到发现了自监督学习这个宝藏领域——特别是DINOv2这样…...
3分钟快速上手:免费高效的Elasticsearch可视化工具Elasticvue终极指南
3分钟快速上手:免费高效的Elasticsearch可视化工具Elasticvue终极指南 【免费下载链接】elasticvue Elasticsearch gui for the browser 项目地址: https://gitcode.com/gh_mirrors/el/elasticvue 你是否曾经为复杂的Elasticsearch集群管理而烦恼?…...
Unity卡牌UI框架实战:构建高性能游戏界面的深度策略
Unity卡牌UI框架实战:构建高性能游戏界面的深度策略 【免费下载链接】UiCard Generic UI for card games like Hearthstone, Magic Arena and Slay the Spire... 项目地址: https://gitcode.com/gh_mirrors/ui/UiCard 在卡牌游戏开发领域,UI交互的…...
收藏!小白也能看懂的大模型如何改写工业效率?
收藏!小白也能看懂的大模型如何改写工业效率? 本文介绍了中控技术的TPT大模型在工业生产中的应用,它通过实时监控、自动计算最优参数和风险预警,帮助企业提升效率、降低成本。与互联网领域的AI应用不同,工业AI的价值更…...
Django REST framework的应用场景
目录一、鉴权开发框架介绍二、Django REST framework是什么三、如何实现认证、权限与限流功能四、Django REST framework的应用场景一、鉴权开发框架介绍 鉴权开发框架是一种用于实现身份验证和授权的软件开发工具。它可以帮助开发者快速构建安全、可靠的身份验证和授权系统&a…...
MicroOS:Arduino轻量级任务调度内核详解
1. MicroOS:面向Arduino的轻量级任务管理内核概述MicroOS是一个专为Arduino平台设计的极简型实时任务管理器,其核心定位并非替代FreeRTOS或Zephyr等完整RTOS,而是填补Arduino原生loop()单线程模型在多任务调度、精确定时与事件解耦方面的空白…...
从‘各玩各的’到‘协同作战’:聊聊多传感器SLAM中坐标系对齐的那些‘坑’与最佳实践
从‘各玩各的’到‘协同作战’:多传感器SLAM坐标系对齐的工程实践指南 当激光雷达的轨迹点云与相机的视觉路径在三维空间中"貌合神离",工程师们往往面临一个关键抉择:是强行统一时间基准,还是重新建立空间映射关系&…...
小红书数据采集自动化工具实战:突破反爬限制的零基础搭建指南
小红书数据采集自动化工具实战:突破反爬限制的零基础搭建指南 【免费下载链接】XiaohongshuSpider 小红书爬取 项目地址: https://gitcode.com/gh_mirrors/xia/XiaohongshuSpider 高效数据采集是内容分析与市场研究的基础,但面对小红书等平台的反…...
XML Notepad:Windows平台XML文档编辑与转换的完整解决方案
XML Notepad:Windows平台XML文档编辑与转换的完整解决方案 【免费下载链接】XmlNotepad XML Notepad provides a simple intuitive User Interface for browsing and editing XML documents. 项目地址: https://gitcode.com/gh_mirrors/xm/XmlNotepad XML No…...
