Question

useRouter 可组合项返回路由器实例。

useRouter

可组合项返回路由器实例，并且必须在设置函数、插件或路由中间件中调用。

在 Vue 组件的模板中，您可以使用 $router 访问路由器。

如果你有一个 pages/ 文件夹，useRouter 的行为与 vue-router 提供的行为相同。 请随意阅读路由器文档以获取有关每种方法的作用的更多信息。

相关阅读：interfaces > router#currentroute

基本操作

• addRoute: 添加一个新路由到路由器实例。 可以提供 parentName 以将新路由添加为现有路由的子路由。
• **removeRoute：**通过名称删除现有路线。
• getRoutes: 获取所有路线记录的完整列表。
• hasRoute: 检查是否存在具有给定名称的路由。

基于历史记录API

• back: 如果可能的话回到历史，与 router.go(-1) 相同。
• forward: 如果可能，在历史中前进，与 router.go(1) 相同。
• go: 在没有 router.back() 和 router.forward() 强制执行的层级限制的情况下向前或向后移动历史记录。
• push: 通过推送历史堆栈中的条目以编程方式导航到新 URL。 建议改用navigateTo。
• replace: 通过替换路由历史堆栈中的当前条目，以编程方式导航到新 URL。 建议改用navigateTo。

router.addRoute() 将路由详细信息添加到路由数组中，这在构建 Nuxt 插件时很有用，而另一方面，router.push() 会立即触发新导航，这在 Nuxt 中很有用 页面组件、Vue 组件和可组合组件。

js

const router = useRouter();
router.back();
router.forward();
router.go();
router.push({ path: "/home" });
router.replace({ hash: "#bio" });

相关阅读：https://developer.mozilla.org/en-US/docs/Web/API/History

导航守卫

useRouter 可组合提供 afterEach、beforeEach 和 beforeResolve 辅助方法作为导航守卫。

但是，Nuxt 有一个路由中间件的概念，可以简化导航守卫的实现，提供更好的开发者体验。

相关阅读：dirs > middleware

承诺和错误处理

• isReady： 返回一个 Promise，该 Promise 在路由器完成初始导航时解析。
• onError： 添加一个错误处理程序，每次在导航过程中发生未捕获的错误时都会调用该处理程序。
• resolve: 返回路线位置的规范化版本。 还包括一个包含任何现有基础的“href”属性。

相关阅读：api#router-methods

通用路由实例

如果你没有 pages/ 文件夹，那么 useRouter 将返回一个具有类似辅助方法的通用路由器实例，但请注意，并非所有功能都受支持或行为方式与 vue-router 完全相同。