如何监听路由变化

在 Vue.js 中，您可以使用路由实例的 $route 属性来监听路由变化。这个属性是一个对象，包含了当前路由的信息，比如路径、参数、哈希以及路由视图的配置信息。

您可以使用 Vue.js 的 watch 特性来监听这个属性的变化，例如：

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  watch: {
    '$route': function (to, from) {
      console.log('路由变化了！');
    }
  }
})

您也可以使用路由实例的 beforeRouteUpdate 钩子函数来监听路由变化，例如：

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeRouteUpdate (to, from, next) {
        console.log('路由变化了！');
        next();
      }
    }
  ]
});

还有一种方法是使用路由实例的 afterEach 钩子函数，例如：

router.afterEach((to, from) => {
  console.log('路由变化了！');
});

在其他框架中，监听路由变化的方法可能略有不同。但大多数框架都提供了类似的机制来监听路由变化。