Vue中router、useRouter、route、useRoute的区别

‌Vue Router和Route在Vue中有着不同的定义和用途。

Vue Router‌是Vue.js的官方路由管理器，用于管理单页应用（SPA）中的路由。它提供了定义路由、导航和配置路由的功能。

router是Vue Router‌的实例，而useRouter是一个组合式 API，用于获取 Vue Router 的实例。

1.router与useRouter

Vue2通过router，可以定义路由、导航到不同的路由以及访问全局路由状态。

this.$router.push('/about')

Vue3通过useRouter返回一个路由实例，通过它可以进行路由操作，例如跳转、替换、监听等。useRouter返回的路由实例本身不是响应式的，但可以通过 router.currentRoute 获取当前路由的响应式状态。

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();
    const goToHome = () => {
      router.push('/'); // 跳转到首页
    };
    const replaceToWorkbench = () => {
      router.replace('/workbench'); // 替换到工作台
    };

    return { goToHome, replaceToWorkbench };
  }
};

2.route与useRoute

Vue2中route是当前激活的路由信息对象，它包含了与当前路由相关的所有信息，如路径参数、查询参数、路由名称等。route对象是由router管理的，可以在组件中通过 this.$route 访问。

this.$route.path;
this.$route.query;
this.$route.params; 

Vue3中useRoute是一个组合式 API，用于获取当前路由的状态信息。它返回一个响应式的路由对象，包含当前路由的所有信息，例如路径、参数、查询等。useRoute返回的对象是响应式的，当路由发生变化时，这些属性会自动更新。

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();
    console.log(route.path); // 当前路径
    console.log(route.params); // 路由参数
    console.log(route.query); // 查询参数
  }
};

3.总结

1. 1）Router‌用于全局路由管理，定义和应用中的所有路由规则。 ‌
2. 2）Route‌用于组件内部，获取当前路由的具体信息，进行局部处理。
3. 3）如果你需要访问当前路由的详细信息（如路径、参数、查询等），使用 useRoute。 
4. 4）如果你需要操作路由（如跳转、替换、监听路由变化等），使用 useRouter。 
5. 5）在实际开发中，useRoute 和 useRouter 可以同时使用，互不冲突。