vue3 如何监听路由变化

1. vue3 如何监听路由变化

在 Vue 3 中，监听路由变化的方式与 Vue 2 有所不同，主要是因为 Vue 3 引入了 Composition API，这使得我们可以以更直观的方式来组织代码。下面详细介绍几种监听路由变化的方法：

1.1. 方法一：使用 watch 函数监听 $route 对象

在 Vue 3 中，可以使用 watch 函数来监听 $route 对象的变化，从而实现实时获取路由变化。这种方式适用于在组件内部监听路由变化，并执行相应操作。

import { watch } from 'vue';
import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();

    // 监听路由变化
    watch(
      () => route,
      (newRoute, oldRoute) => {
        console.log('Route changed:', newRoute, oldRoute);
        // 在这里可以执行路由变化时需要做的任何逻辑
      },
      { deep: true, immediate: true }
    );

    // 返回需要使用的响应式数据和其他函数
  }
};

这里的 deep 参数表示深观察，因为 route 对象是一个嵌套的对象，所以需要启用深观察才能捕捉到其内部属性的变化。

immediate 参数表示是否立即执行监听器。

1.2. 方法二：使用 onBeforeRouteUpdate 导航守卫

Vue Router 也为开发者提供了一个名为 onBeforeRouteUpdate 的生命周期钩子，可以在当前路由改变复用组件时调用。这意味着当路由改变但是它所对应的组件被重用时，会触发此钩子。

import { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      console.log(`Route is about to change from ${from} to ${to}`);
      // 在这里可以执行路由变化前需要做的任何逻辑
    });
  }
};

1.3. 方法三：监听 router.currentRoute.value.path

另一种方法是直接监听 router.currentRoute.value.path，这种方法同样可以达到监听路由变化的目的。

 import { watch } from 'vue';
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    
    // 监听当前路由路径的变化
    watch(
      () => router.currentRoute.value.path,
      (newPath, oldPath) => {
        console.log(`Current path changed from ${oldPath} to ${newPath}`);
      },
      { immediate: true }
    );
  }
};

以上三种方法都可以有效地帮助你在 Vue 3 中监听路由的变化，并根据变化执行特定的操作。

如果只需要在当前组件内监听路由变化，推荐使用 watch 函数；如果需要在路由变化前做某些处理，则 onBeforeRouteUpdate 是更好的选择。