前端VUE框架开发中watch是常用的监听器，它主要用于侦听数据的变化。

通过对指定数据的监听，可以实时控制到指定数据的改变并进行对应的操作流程。

那么如果我们需要对路由进行监听，在路由发生变化时做出对应的操作要如何实现呢？

本篇文章就来介绍在vue3框架中，如何使用wacth实现对路由改变的监听。

<script setup>
	import { watch,ref } from 'vue';
	import { useRouter} from 'vue-router'
	const routerActive = ref("/")
	const router = useRouter()
	// 监听当前路由
	watch(
	  () => router.currentRoute.value,
	  (newValue) => {
	    console.log('newValue',newValue)
		routerActive.value = newValue.path
	  },
	  { immediate: true }
	)
</script>

通过上述代码，即可实现在vue3语法糖setup中对路由的深度监听。接下来，我们来看关于代码中几个关键的参数说明。

    useRouter：用于获取路由实例

    immediate：为true后，则监听的这个对象会立即输出，也就是说一刷新页面就会在控制台输出。