在 Vue.js 中，尤其是结合 Vue Router 时，监听路由变化是一项常见的需求。这可以用于执行如页面标题更新、权限验证、滚动到页面顶部等操作。Vue Router 提供了几种方式来监听路由的变化。

1. 使用 watch 监听 $route

在 Vue 组件中，你可以通过 watch 属性来监听 $route 对象的变化。$route 对象包含了当前路由的信息，如 URL 解析得到的信息，以及 URL 匹配到的路由记录（route records）。

export default {
  watch: {
    '$route'(to, from) {
      // 对路由变化做出响应...
      console.log("路由变化了", to, from);
    }
  }
}

2. 使用 Vue Router 的导航守卫

Vue Router 提供了全局守卫、路由独享的守卫以及组件内的守卫，这些守卫允许你在路由进入前后执行一些操作。

• 全局前置守卫

  router.beforeEach((to, from, next) => {
    // ...执行一些操作
    // 一定要调用 next()
    next();
  });
  

• 全局后置守卫

  router.afterEach((to, from) => {
    // 注意：不包括 next，也不会改变导航本身
  });
  

• 路由独享的守卫

  你可以在路由配置上直接定义 beforeEnter 守卫：

  const routes = [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
  

• 组件内的守卫

  • beforeRouteEnter
  • beforeRouteUpdate (2.2+)
  • beforeRouteLeave

  这些守卫允许你在组件内部直接定义路由导航的守卫。

  export default {
    beforeRouteEnter(to, from, next) {
      // 在渲染该组件的对应路由被 confirm 前调用
      // 不！能！获取组件实例 `this`
      // 因为当守卫执行前，组件实例还没被创建
      next(vm => {
        // 通过 `vm` 访问组件实例
      })
    },
    beforeRouteUpdate(to, from, next) {
      // 在当前路由改变，但是该组件被复用时调用
      // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，
      // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。
      // 可以访问组件实例 `this`
    },
    beforeRouteLeave(to, from, next) {
      // 导航离开该组件的对应路由时调用
      // 可以访问组件实例 `this`
    }
  }
  

3. 使用 Vue Router 的 scrollBehavior

虽然这不是直接监听路由变化，但 scrollBehavior 方法允许你根据路由变化来定制页面的滚动行为。这通常用于在路由变化时滚动到页面顶部或特定的位置。

const router = new VueRouter({
  routes: [...],
  scrollBehavior(to, from, savedPosition) {
    // 返回滚动位置的对象
    // { x: 0, y: 0 }
    // { selector: 'someElementId', offset: { x: 0, y: 10 } } (需要 dom-scroll-behavior@next)
    // 如果返回 falsy 的值，或者是一个空对象，则不会发生滚动。
    // 如果 savedPosition 存在，则优先使用 savedPosition.x 和 savedPosition.y
    return { x: 0, y: 0 }
  }
})

根据你的具体需求，可以选择最适合你的方法来监听和响应 Vue.js 中的路由变化。