vue中用watch监听路由变化，改变导航样式

最新推荐文章于 2024-09-12 16:17:49 发布
最新推荐文章于 2024-09-12 16:17:49 发布
阅读量1k 收藏 1
点赞数
文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_38673922/article/details/106283463
版权

在这里插入图片描述

	methods: {
		getIndex() {
			//头部导航样式设置：利用wacth监听，当路由发生变化 执行watch中的方法
			if(this.$store.state.numStatus == 1){			//账号设置   跳至我的
				this.activeclass = 4;
			}else if(this.$store.state.numStatus == 2){		//退出系统	跳至首页
				this.activeclass = 1;
			}else if(this.$store.state.numStatus == 3 || this.$store.state.numStatus == 5){		
				//点击首页中的立即翻译  跳至 我的立即翻译
				//点击我的模块中的去使用  跳至立即翻译
				this.activeclass = 2;
			}else if(this.$store.state.numStatus == 4){		//翻译时，动画消失或点击我的翻译     跳至 我的翻译
				this.activeclass = 3;
			}else{}
		}
	},
	watch: {
		// 如果路由有变化，会再次执行该方法
		"$route": "getIndex"
	}
Zh.冠军
关注
通过 VUE watch监听实现中英文切换时元素样式改变
qq_42341171的博客
11-20 1963
通过 VUE watch监听实现中英文切换时元素样式改变 1.前言 1.写项目的时候遇到的问题：新写的网页有中英文切换功能，但是当我切换成英文的时候，文本如果给定宽度，那么有时候翻译成英文文本会过长导致换行，可能会将原本下面的元素往下挤，所以我想要实现如下功能：一个元素有两套样式，当我进行中英文切换的时候样式也随之进行切换。 2.实现 之前有试过通过v-bind动态绑定style或class实现样...
vue 笔记4：路由，嵌套路由，重定向 ，跳转，传值，监听路由跳转 ，修改当前路由导航样式，报错
qq_43594321的博客
10-11 438
vue 笔记（1） 传值 1—子传父 this.$emit("事件"，data) //子组件 tabbar <div @click="mineClick">.... methods:{ mClick(){ this.$emit('mineClick' , data) } } .... //父组件 <div id="app"> //子组件 tabbar <tabbar @mineClick="getShow" />
深入vue3的watch & watchEffect
最新发布
qq_40977044的博客
09-12 1112
在vue中需要根据某些的变化而进行特定（网络请求、定时任务、操作dom等）的处理时，便可以采用watchwatch的简单用法如上图所述，当响应式数据watchState变化的时候，传入watch的回调函数便会，该回调函数可以接收到watchState变化的值。watch。
Vue项目总结（1）--- 在不同路由下，组件样式需要改变的解决方案，动态监听路由变化。
Dwyane1279的博客
10-23 1284
在项目中遇到一个问题，当进入不同的路由时，根组件的导航栏颜色需要改变。 在主界面时，导航栏样式应为： 在其他界面时，导航栏样式应为： 最初解决方案： 一开始想到的解决方案是，当其他界面的组件创建时，向根组件传递数据，改变导航栏样式(导航栏写在了根组件中)。 弊端：①实现起来比较困难；②需要给许多组件配置这个方案，很麻烦 最终解决方案： 通过v-bind指令动...
Vue.js 实现$watch监听输入框的内容切换按钮的样式【开发记录】
单枪匹码
06-08 1619
前阶段开发过程中，遇到这样一个需求，就是输入框无内容时按钮置灰，一旦输入了内容按钮变色，记录使用Vue.js实现过程。 1、思路：在 input 中使用 v-model 和 data中定义好的变量实现双向绑定，通过 data 中的值来监听input中的值，接下来使用$watch来监听data中的值，这样一旦input中的值改变，data中的值就会改变，这时我们就可以通过 $watch 来进行data改变后的响应操作。 实现代码：写个大概，主要看思路 <input v-model="login_phon
Vue应用（三）---watch、computed、绑定类、绑定样式
hurricane_li的博客
06-18 810
&lt;!-- watch侦听属性，computed计算属性，绑定class，绑定style --&gt; &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="https://cdn.bootcs
vue2.x的监听watch小爆料
sinat_27514587的博客
11-02 253
此文首发于 https://lijing0906.github.io 跟vue相爱相杀这么久了，今天第一次来爆点小料(主要还是为自己做笔记)------vue2的watch监听 路由监听,也适用于普通变量（基本数据类型）的监听 一、写法一,普通监听 watch: { $route(nVal, oVal){ console.log(nVal) //打印...
vue3 setup watch computed teleport Suspense useRoute useRouter
xiao_yuanyuan_20的博客
05-25 984
一，setup(){} 1，定义变量 以及使用 setup(){ let age = 20; return{ age, } } 2,点击事件的方法。vue2 写入到methods中，在setup(){}中的写法 <button @click="modify">按钮</button> setup(){ let age = ref(20); //使用ref点击事件的时候是响应式的 const modify = ()=>{
vue面试题
m0_62717621的博客
09-01 1118
vue面试题
详解vue-cli项目中用json-sever搭建mock服务器
10-19
在Vue.js开发过程中，有时候我们需要在没有真实后端服务器的情况下进行前端功能的开发和测试，这时Mock服务器就显得尤为重要。本文将详细讲解如何在基于vue-cli构建的项目中利用json-server搭建一个Mock服务器。 ...
Vue 生命周期，钩子，路由（使用vue cli）
m0_50862228的博客
10-23 399
一、生命周期 二、钩子函数 三、路由
vue使用watch 观察路由变化，重新获取内容
weixin_30326745的博客
05-14 104
watch: { $route(to) { console.log(to) if (to.path.indexOf('index') != -1) { //路由变化后重新获取帖子列表 this.$http.get('/api/communityList...
vue3+setup中监听路由变化改变样式
STATICHIT静砸的博客
03-15 2081
在这个例子中，我们定义了一个响应式的style对象，并使用useRoute来获取当前的路由信息。在Vue 3中，有一个非常方便的API可以观察响应式数据的变化，即watchEffect。watchEffect是一个新的API，可以自动跟踪响应式数据的变化，并在其发生变化时执行回调函数。总之，使用watchEffect可以非常方便地观察响应式数据的变化，并执行相关的操作。在本例中，我们将使用watchEffect和useRoute来观察路由的变化，并更新页面的样式。dataScreen页面。
Vue 监听路由变化的三种方式
热门推荐
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
08-25 3万+
方法一：通过 watch // 监听,当路由发生变化的时候执行 watch:{ $route(to,from){ console.log(to.path); } }, 或 // 监听,当路由发生变化的时候执行 watch: { $route: { handler: function(val, oldVal){ console.log(val); }, // 深度观察监听 deep: true } }, 或 // 监听,..
【Vue】改变 vuex 中的 state ，子组件 watch 监听不到对象值变化。
qq_45677671的博客
10-07 1196
改变 vuex 中的 state ，子组件 watch 监听不到对象值变化。
Vue2剥丝抽茧-响应式系统之watch
郊眠寺
06-20 283
Vue2 源码从零详解系列文章， 还没有看过的同学可能需要看一下之前的，vue.windliang.wang/ 相信大家在 中一定写过 ，用来监听 中的数据变化，回调函数会接收到新值和旧值。这篇文章来实现 ，因为需要用到 所以要把 传入，还有就是 也传入。之前的文章我们实现了一个 类。 接收一个函保存到 属性中，如果函数中使用了 中的属性，当 中对应的属性变化的时候就会再次执行该函数。 对于 ， 我们现在想要监听 的变化，为了触发相应属性的 来收集 ，我们可以把读取这个值封装为
vue中的watch
Dwayne_dw的博客
01-28 323
watch中文翻译过来就是 观察 的意思，所以vue中的watch就像一个观察者一样，观察状态的变化，变化就会触发回调函数。 页面： &lt;div&gt; &lt;h1&gt;{{ state }} &lt;button @click="add"&gt;+1&lt;/button&gt;&lt;/h1&gt; &lt;/div&gt; js: ex
vue监听watch或mutations
紫月7575的博客
10-13 105
mutations。
Watch数据监听详解（Vue2+Vue3）
宝子的博客
08-27 1万+
watch数据监听，各种用法和一些属性的解释说明。
vue3 watch监听路由改变写法
09-07
在Vue 3中，你可以使用`watch`函数来监听路由变化。通常，我们会监听Vue Router的`$route`对象来检测路径的变化。以下是一个示例代码，展示了如何使用Vue 3的Composition API来实现对路由变化的监听： ```javascript import { ref, watch } from 'vue'; import { useRoute } from 'vue-router'; export default { setup() { const route = useRoute(); // 获取当前路由实例 const currentPath = ref(route.path); // 使用ref创建响应式的路径数据 // 监听路由变化 watch( () => route.path, // 监听route.path变化 (newValue, oldValue) => { console.log(`路由从 "${oldValue}" 变化到了 "${newValue}"`); // 这里可以执行路由变化后需要的操作，比如获取新的路由参数 } ); // 你也可以在这里返回需要暴露给模板的数据或方法 return { currentPath, }; }, }; ``` 在上面的代码中，我们首先从`vue-router`中引入了`useRoute`函数，用以获取当前的路由对象。然后，我们创建了一个响应式的变量`currentPath`来存储当前的路由路径，并使用`watch`函数监听`route.path`的变化。每当路由路径发生变化时，`watch`的回调函数会被触发，你可以在这个回调函数中执行需要的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值