vue监听当前页面路由参数变化

_best

于 2021-12-28 08:31:19 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/github_40122084/article/details/122184511

前端专栏收录该内容

12 篇文章

订阅专栏

本文介绍了Vue中监听路由变化的两种主要方法：使用导航守卫和在watch中监听。通过全局导航守卫，开发者可以实现精细的路由控制。而在watch中，不仅可以监听整个路由对象，还可以专门针对路由参数如`$route.query.type`进行变化监控，从而在路由或参数变更时执行相应操作。这两种方式为Vue应用提供了灵活的路由响应能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue可通过导航守卫监听全局路由变化，这是最常用的方法，当然vue在页面里可在watch中监听当前路由变化：

watch:{
	$route: {
		handler(newVal,oldVal){
			//判断newVal有没有值监听路由变化
	},
	deep: true
}

另外，还可以监听参数的变化，只需改变监听内容即可,如监听路由中type值的变化：

watch:{
	'$route.query.type': {
		handler(newVal,oldVal){
			//判断newVal有没有值监听路由变化
	},
	deep: true
}