v3.16
Nuxt on GitHub

useRouter

源代码
useRouter 可组合函数返回路由器实例。
pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>

如果您仅在模板中需要路由器实例，可以使用 $router：

pages/index.vue
<template>
  <button @click="$router.back()">返回</button>
</template>

如果您有 pages/ 目录，useRouter 的行为与 vue-router 提供的行为完全相同。

阅读 vue-router 文档中关于 Router 接口的说明。

基本操作

  • addRoute()：向路由器实例添加新路由。可以提供 parentName 以将新路由添加为现有路由的子路由。
  • removeRoute()：通过路由名称删除现有路由。
  • getRoutes()：获取所有路由记录的完整列表。
  • hasRoute()：检查是否存在具有给定名称的路由。
  • resolve()：返回路由位置的规范化版本。还包括一个包含任何现有基础路径的 href 属性。
示例
const router = useRouter()

router.addRoute({ name: 'home', path: '/home', component: Home })
router.removeRoute('home')
router.getRoutes()
router.hasRoute('home')
router.resolve({ name: 'home' })
router.addRoute() 将路由详情添加到路由数组中，这在构建 Nuxt 插件 时非常有用；而 router.push() 则会立即触发新导航，这在页面、Vue 组件和可组合函数中很有用。

基于历史记录 API

  • back()：如果可能，在历史记录中后退，等同于 router.go(-1)。
  • forward()：如果可能，在历史记录中前进，等同于 router.go(1)。
  • go()：在历史记录中向前或向后移动，不受 router.back() 和 router.forward() 中强制执行的层级限制。
  • push()：通过在历史记录堆栈中推入一个条目，以编程方式导航到新 URL。建议使用 navigateTo 代替。
  • replace()：通过替换路由历史记录堆栈中的当前条目，以编程方式导航到新 URL。建议使用 navigateTo 代替。
示例
const router = useRouter()

router.back()
router.forward()
router.go(3)
router.push({ path: "/home" })
router.replace({ hash: "#bio" })
了解更多关于浏览器历史记录 API 的信息。

导航守卫

useRouter 可组合函数提供了 afterEach、beforeEach 和 beforeResolve 辅助方法，充当导航守卫。

然而，Nuxt 引入了 路由中间件 的概念，简化了导航守卫的实现，并提供了更好的开发者体验。

阅读更多 Docs > Guide > Directory Structure > Middleware.

Promise 和错误处理

  • isReady()：返回一个 Promise，在路由器完成初始导航时解析。
  • onError：添加一个错误处理程序，在导航期间发生未捕获的错误时调用。
阅读更多 Vue Router 文档.

通用路由器实例

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