vue中watch监听路由用法(一)

Vue中watch监听路由用法

在Vue中，我们可以使用watch来监听$route对象的变化，实时监测路由的变化。这样可以方便我们在路由变化时，执行相应的操作，如更新页面内容、请求数据等。 监听路由变化

使用watch可以监听$route对象的变化，通过以下方式进行设置：

watch: {

'$route': function (to, from) { // 监听到路由变化时的操作 } }

在watch选项中，我们使用了$route作为我们要监听的属性，当$route对象发生变化时，相应的函数会被执行。这个函数接收两个参数：新的路由对象和旧的路由对象，我们可以通过这两个参数来获取路由的信息。

监听路由路径变化

除了监听整个$route对象的变化外，我们还可以只监听路由路径的变化。通过在watch选项中监听$属性可以实现：

watch: {

'$': function (to, from) { // 监听到路由路径变化时的操作 } }

这样只有路由路径发生变化时，相应的函数才会被执行。函数的参数和上述方式相同，可以获取到新的路由路径和旧的路由路径。 监听特定路由路径的变化

有时候我们只对某个特定的路由路径变化感兴趣，可以通过在watch选项中使用字符串表达式来实现：

watch: { '$': {

handler: function (to, from) { // 监听到特定路由路径变化时的操作 },

immediate: true } }

在这种方式下，我们在watch选项中使用了handler字段来表示监听函数，immediate字段设置为true表示立即执行一次监听函数。这样只有特定路由路径发生变化时，相应的函数才会被执行。 监听路由参数的变化

除了监听路由路径的变化，我们还可以监听路由参数的变化。通过在watch选项中监听$属性可以实现：

watch: {

'$': function (to, from) { // 监听到路由参数变化时的操作 } }

这样只要路由参数发生变化，相应的函数就会被执行。函数的参数和前述方式相同，可以获取到新的路由参数和旧的路由参数。 监听路由查询参数的变化

在开发中，经常需要获取路由查询参数的变化，我们可以使用watch来实现。通过在watch选项中监听$属性可以实现：

watch: {

'$': function (to, from) { // 监听到路由查询参数变化时的操作 } }

这样只要路由查询参数发生变化，相应的函数就会被执行。函数的参数和前述方式相同，可以获取到新的路由查询参数和旧的路由查询参数。

以上是使用watch监听路由变化的一些常见用法，可以根据自己的实际需求选择适合的方式来监听路由，并在变化时执行相应的操作。