vue3+setup中监听路由变化改变样式
创始人
2025-05-28 15:54:18

在Vue 3中，有一个非常方便的API可以观察响应式数据的变化，即watchEffect。watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数。这意味着您不需要手动指定依赖项，watchEffect可以根据您的代码自动推断依赖项。

在本例中，我们将使用watchEffect和useRoute来观察路由的变化，并更新页面的样式。下面是代码实现：

在这个例子中，我们定义了一个响应式的style对象，并使用useRoute来获取当前的路由信息。然后，我们使用watchEffect来观察route.path的变化，并在回调函数中更新style对象。如果当前路由为'/dataScreen'，则我们将样式更改为蓝灰色（#eff1f7）背景，否则为白色背景。

总之，使用watchEffect可以非常方便地观察响应式数据的变化，并执行相关的操作。如果您需要在Vue 3中观察数据的变化，不妨尝试使用watchEffect。

实现效果：

dataScreen页面

其他 

词库加载错误:未能找到文件“E:\highferrum_mysql\Configuration\Dict_Stopwords.txt”。

上一篇：九州缥缈录电视剧羽然结局,九州缥缈录羽然结局 极速百科网 极速百科

下一篇：Hikaricp和Druid对比

相关内容

热门资讯

element输入框el-in... element输入框el-input之格式控制 （1）限制输入的长度&#...
oracle19c迁移手册 windows10- 查看当前用户所有的表：select table_name fro...
docker-compose搭... # 关闭防火墙 systemctl stop firewalld.service # 永久关闭防火墙...
【2023最新Activiti... 1.流程实例 1.1 什么是流程实例 流程实例(ProcessInstance)代表流程定义的执行实...
基于ggdensity包的等高... 简介 科研过程中，需要绘制某个后验密度/其他的形状。在发表论文中常常使用等高线来满足该...
Leetcode 105. 从... 题目： 给定两个整数数组 preorder 和 inorder ，其中 ...
点亮LED 目录 一、LED 硬件控制方式 二、LED 应用程序 1、定义宏 2、main函数 ①、打开文件  ...
随想008：烂摊子 我看到过很多离谱的现象。比如： 程序 代码重复、命名随意、逻辑混乱、甚至对齐都不一致&...
2023长沙到广州的火车时刻表... 今天给各位分享2023长沙到广州的火车时刻表,从长沙到广州高铁最新...的知识，其中也会对长沙到广州...
车载DVD一体机导航升级教程(... 本篇文章极速百科给大家谈谈车载DVD一体机导航升级教程(凯立德)(超详细)，以及汽车凯立德导航用u盘...
圈内sp是什么意思（sp圈里是... 今天给各位分享圈内sp是什么意思的知识，其中也会对sp圈里是什么样的进行解释，如果能碰巧解决你现在面...
鸡蛋撞地球（鸡蛋撞地球怎么制作... 本篇文章极速百科给大家谈谈鸡蛋撞地球，以及鸡蛋撞地球怎么制作对应的知识点，希望对各位有所帮助，不要忘...
Vue2基础语法速通2 目录计算属性计算属性的简写监视属性深层次监视watch 和 computed 区别绑定 class ...
2023年全国最新高校辅导员精... 百分百题库提供高校辅导员考试试题、辅导员考试预测题、高校辅导员考试真题、辅导员证考试题库等ÿ...
Web前端：Angular和R... 　　在编程领域，Angular 和 React 对于前端开发人员来说是目前最流行的两款...
【Git】SourceTree... 本系列文章前言   之前一直用的TeamFoundation，近期要代码迁移到Gite...
五官是指哪些（五官是指哪些器官... 今天给各位分享五官是指哪些的知识，其中也会对五官是指哪些器官进行解释，如果能碰巧解决你现在面临的问题...
北京汽车交易市场有哪些（北京车... 本篇文章极速百科给大家谈谈北京汽车交易市场有哪些，以及北京车市场在哪里对应的知识点，希望对各位有所帮...
微信吃喝玩乐在哪里搜（微信中吃... 本篇文章极速百科给大家谈谈微信吃喝玩乐在哪里搜，以及微信中吃喝玩乐在哪儿对应的知识点，希望对各位有所...
马勒滤清器怎么样（马勒滤清器产... 今天给各位分享马勒滤清器怎么样的知识，其中也会对马勒滤清器产品目录进行解释，如果能碰巧解决你现在面临...
Java服务器-NIO模型-J... Java服务器 NIO概览 NIO模型 每个客户端关联的套接字都注册到服务器的选择器（...
Vault配置中心产品调研实施... Vault配置中心产品调研实施方案 一、需求描述 nacos作为配置中文，数据都是明文...
镜头校正软件的新标杆DxO P... 镜头校正软件的新标杆DxO PhotoLab 6 的光学校正功能基于 DxO 专用实验室 20 年的...
CNI 网络流量 5.2 Ci... 文章目录Pod 间同节点 pod跨节点 pod in vxlan小结 环境： fedo...
汽车养护,汽车养护品牌排行榜前... 今天给各位分享汽车养护,汽车养护品牌排行榜前十名的知识，其中也会对汽车养护产品品牌进行解释，如果能碰...
大灯随动转向是什么意思?随动转... 今天给各位分享大灯随动转向是什么意思?随动转向大灯是什么功能的知识，其中也会对大灯随动转向是近光还是...
80厘米是几尺几寸（78厘米是... 本篇文章极速百科给大家谈谈80厘米是几尺几寸，以及78厘米是几尺几寸对应的知识点，希望对各位有所帮助...
拉杆旅行箱包十大品牌排行（拉杆... 今天给各位分享拉杆旅行箱包十大品牌排行的知识，其中也会对拉杆旅行包价格进行解释，如果能碰巧解决你现在...
Vue2学习小笔记（一篇带你入... 一篇入门Vue2一、基础概念1.1 MVC和MVVM1.2 初识Vue1.2.1 Vue是什么1.2...
【3.17】MySQL索引整理... 3.1 索引常见面试题 索引的分类 什么是索引？ 索引是一种数据结构，...