vue3 如何监听路由变化

在 Vue 3 中，监听路由变化是一个常见的需求，尤其是在需要根据路由动态加载数据或执行某些操作时。Vue Router 提供了多种方式来实现路由变化的监听。以下是几种常见的方法：

---

@[toc]

1. 使用 watch 监听 $route 对象

Vue 3 的 watch API 可以用来监听 $route 对象的变化。$route 包含了当前路由的信息（如路径、参数、查询等）。

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

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

    // 监听路由变化
    watch(
      () => route.path, // 监听 path 变化
      (newPath, oldPath) => {
        console.log('路由路径从', oldPath, '变为', newPath);
      }
    );

    // 监听路由参数变化
    watch(
      () => route.params, // 监听 params 变化
      (newParams, oldParams) => {
        console.log('路由参数从', oldParams, '变为', newParams);
      }
    );

    // 监听查询参数变化
    watch(
      () => route.query, // 监听 query 变化
      (newQuery, oldQuery) => {
        console.log('查询参数从', oldQuery, '变为', newQuery);
      }
    );
  }
};

---

2. 使用 onBeforeRouteUpdate 导航守卫

onBeforeRouteUpdate 是 Vue Router 提供的一个导航守卫，可以在组件内监听路由更新（例如，从 /user/1 跳转到 /user/2）。

import { onBeforeRouteUpdate } from 'vue-router';

export default {
  setup() {
    onBeforeRouteUpdate((to, from) => {
      console.log('路由从', from.path, '更新为', to.path);
      console.log('新参数:', to.params);
    });
  }
};

---

3. 使用 onBeforeRouteLeave 导航守卫

onBeforeRouteLeave 用于监听路由离开当前组件时的变化。适合在用户离开页面时执行一些操作（如保存数据或提示用户）。

import { onBeforeRouteLeave } from 'vue-router';

export default {
  setup() {
    onBeforeRouteLeave((to, from) => {
      const answer = window.confirm('确定要离开吗？未保存的数据可能会丢失。');
      if (!answer) {
        return false; // 取消导航
      }
    });
  }
};

---

4. 使用全局路由守卫

如果你需要在全局范围内监听路由变化，可以使用 Vue Router 的全局路由守卫（beforeEach 和 afterEach）。

import { createRouter, createWebHistory } from 'vue-router';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    // 路由配置
  ],
});

// 全局前置守卫
router.beforeEach((to, from) => {
  console.log('从', from.path, '跳转到', to.path);
});

// 全局后置守卫
router.afterEach((to, from) => {
  console.log('已完成从', from.path, '到', to.path, '的跳转');
});

export default router;

---

5. 使用 useRouter 和 useRoute 组合式 API

Vue Router 提供了 useRouter 和 useRoute 两个组合式 API，可以更方便地在 setup 函数中访问路由信息。

import { useRouter, useRoute } from 'vue-router';

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

    // 监听路由变化
    watch(
      () => route.path,
      (newPath, oldPath) => {
        console.log('路由路径从', oldPath, '变为', newPath);
      }
    );

    // 手动跳转路由
    const goToAbout = () => {
      router.push('/about');
    };

    return {
      goToAbout,
    };
  },
};

---

6. 监听特定路由参数的变化

如果只需要监听某个特定路由参数的变化，可以直接在 watch 中监听 route.params 的某个属性。

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

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

    // 监听 userId 参数的变化
    watch(
      () => route.params.userId,
      (newUserId, oldUserId) => {
        console.log('userId 从', oldUserId, '变为', newUserId);
      }
    );
  },
};

---

7. 监听查询参数的变化

查询参数（query）的变化也可以通过 watch 监听。

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

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

    // 监听查询参数的变化
    watch(
      () => route.query,
      (newQuery, oldQuery) => {
        console.log('查询参数从', oldQuery, '变为', newQuery);
      }
    );
  },
};

---

8. 监听哈希变化

如果路由使用了哈希模式（hash），可以通过监听 route.hash 来捕获哈希变化。

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

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

    // 监听哈希变化
    watch(
      () => route.hash,
      (newHash, oldHash) => {
        console.log('哈希从', oldHash, '变为', newHash);
      }
    );
  },
};

---

总结

在Vue 3中监听路由的变化是一项常见的需求，它允许开发者在路由跳转时执行相应的逻辑，如获取新数据、更新组件状态等。Vue 3引入了Composition API，使得监听路由变化的方式与Vue 2有所不同，但同样提供了多种方法来实现这一目标。

一种常见的方法是使用watch函数来监听$route对象的变化。通过useRoute钩子获取当前路由对象，并使用watch函数来监听其变化。这种方式适用于在组件内部监听路由变化，并执行相应操作。watch函数可以接受一个返回需要监听值的函数作为参数，当监听的值发生变化时，会触发回调函数，执行相应的逻辑。

另一种方法是使用onBeforeRouteUpdate导航守卫。这是Vue Router提供的一个生命周期钩子，它会在当前路由改变且复用组件时调用。这意味着当路由改变但是它所对应的组件被重用时，会触发此钩子。通过此钩子，开发者可以在路由变化前执行一些逻辑，如获取新数据、验证权限等。

此外，还可以直接监听router.currentRoute.value.path来实现路由变化的监听。这种方式通过useRouter钩子获取路由实例，并使用watch函数来监听当前路由路径的变化。当路径发生变化时，会触发回调函数，执行相应的逻辑。

以上三种方法都可以有效地帮助开发者在Vue 3中监听路由的变化，并根据变化执行特定的操作。选择哪种方法取决于具体的应用场景和个人偏好。无论使用哪种方法，Vue 3都提供了灵活而强大的工具来支持路由变化的监听和处理。 在 Vue 3 中监听路由变化有多种方式，具体选择取决于你的需求：

• 如果需要监听全局路由变化，可以使用 全局路由守卫。
• 如果需要在组件内监听路由变化，可以使用 watch 或 onBeforeRouteUpdate。
• 如果需要监听特定参数或查询的变化，可以直接监听 route.params 或 route.query。

通过合理使用这些方法，可以轻松实现路由变化的监听和处理。