router 和 route的使用

在 Vue 3 中，尤其是在使用 Vue Router 时，route 和 router 是两个与路由功能紧密相关的对象，它们提供了不同的功能和用途。

Vue Router 的 route 对象

route 对象代表当前激活的路由的状态信息。当你使用 Vue Router 时，每个组件都可以访问一个 route 对象的实例（通过 useRoute 钩子），它包含了以下属性：

- name：路由的名称。
- path：路由的路径。
- query：一个包含路由查询参数的对象。
- hash：路由的 hash 部分。
- fullPath：完整的路由路径，包括查询字符串和 hash。
- matched：一个数组，包含当前路由下的所有匹配的路由记录（route records）。

route 对象通常用于读取当前路由的信息，例如：

import { useRoute } from 'vue-router';

export default {
  setup() {
    const route = useRoute();//一般直接写这一行，系统会自动导入
    console.log(route.name); // 打印当前路由名称
    console.log(route.query); // 打印查询参数
    // ...
  }
};

Vue Router 的 router 对象

router 对象是 Vue Router 的实例本身，它提供了一组方法来与路由进行交互，例如导航和编程式路由控制。router 对象的主要方法包括：

- push(location, onComplete?, onAbort?)：向历史记录添加一个新的记录，导航到一个新的 URL。
- replace(location, onComplete?, onAbort?)：替换当前的路由记录，不留下后退记录。
- go(n)：在历史记录中向前或向后跳转。
- back()：后退到上一个历史记录。
- forward()：前进到下一个历史记录。
- getCurrentLocation()：获取当前的路由位置。

`router` 对象通常用于在应用中进行导航，例如：

import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();//一般直接写这一行，系统会自动导入
    function navigateToHome() {
      router.push({ name: 'Home' });
    }
    // ...
  }
};

总结

- route 对象用于获取当前路由的状态信息。
- router 对象用于执行路由导航和其他路由相关操作。

在使用 Vue 3 和 Vue Router 时，通常会结合使用 route 和 router 对象来读取路由信息和控制路由行为。