Vue中使用watch方法监控路由更新

在Vue中，我们可以通过watch方法来监控路由更新，从而实现在路由更新时执行某些操作。

监控路由更新

我们可以监听$route对象来监控路由更新。

watch: {
  '$route': function(to, from) {
    // to为当前路由对象，from为上一个路由对象
    // 在路由更新时执行某些操作
  }
}

例子

下面是一个例子，我们在路由更新时打印当前路由对象和上一个路由对象。

<template>
  <div>
    <h1>{{ $route.name }}</h1>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  watch: {
    '$route': function(to, from) {
      console.log('路由更新', to, from);
    }
  }
}
</script>

<style>
/* 样式 */
</style>

总结

通过watch方法可以很方便地监控路由更新，实现在路由更新时执行某些操作，例如更新页面标题、获取新数据等等。