Vue3 useRouter()和useRoute()的区别

20 min read

在Vue3中，useRouter()和useRoute()都是Vue Router提供的钩子函数，用于获取路由相关信息，但有一些细微的区别。

  1. useRouter()钩子函数返回一个路由实例，在Vue Router中有全局唯一的路由实例。通过调用useRouter()可以获取到这个实例，进一步对路由进行操作。常见的用法是在组件内部获取路由的路径、参数等信息，并且可以跳转到其他路由。
import { useRouter } from 'vue-router';

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

    const goToHomePage = () => {
      router.push('/');
    };

    return {
      goToHomePage,
    };
  },
};
  1. useRoute()钩子函数返回当前活跃路由(route)的信息。它返回一个响应式的ref对象，包含了当前路由的路径、参数、查询参数等信息。常见的用法是在组件中根据当前路由的信息进行组件渲染或者逻辑处理。
import { useRoute } from 'vue-router';

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

    const userId = route.params.id;
    
    return {
      userId,
    };
  },
};

总的来说，useRouter()用于获取全局的路由实例，可以对路由进行跳转等操作，而useRoute()则用于获取当前活跃路由的信息，用于根据路由信息进行组件渲染或逻辑处理。