vue如何在单个页面中监听路有变化

在 Vue 中，可以使用 `$route` 对象来监听路由变化。你可以在组件中通过以下方式使用它：

<template>
  <div>
    <h1>当前路径：{{ $route.path }}</h1>
  </div>
</template>

<script>
export default {
  // ...
  watch: {
    '$route': function(to, from) {
      // 在这里你可以监听路由的变化，并执行相应的操作
    }
  }
}
</script>

在上面的代码中，我们使用了 Vue 的 `watch` 选项来监听 `$route` 对象的变化。当路由发生变化时，会触发 `$route` 对象的变化，从而触发回调函数的执行。

你还可以使用 Vue 的路由守卫来监听路由的变化。路由守卫是指在路由跳转之前或之后执行的函数，它可以帮助你在路由跳转时执行一些操作。例如，你可以使用路由守卫来拦截未登录的用户，让他们先登录再访问某些页面。

<template>
  <div>
    <!-- 路由视图组件将会渲染在这里 -->
  </div>
</template>

<script>
export default {
  // ...
  beforeRouteEnter(to, from, next) {
    // 这个函数会在进入路由之前执行
    // 你可以在这里执行一些操作，然后使用 next 函数进行路由跳转
  },
  beforeRouteUpdate(to, from, next) {
    // 这个函数会在路