useRouter

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

如果你只需要在模板中使用路由器实例，请使用 $router

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

如果你有 app/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 组件和可组合函数中很有用。

基于 History 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' })
阅读有关浏览器 History API 的更多信息。

导航守卫

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

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

更多信息请阅读：文档 > 4 X > 指南 > 目录结构 > App > Middleware。

Promise 和错误处理

  • isReady(): 返回一个 Promise，该 Promise 在路由器完成初始导航时解析。
  • onError: 添加一个错误处理程序，每当导航期间发生未捕获的错误时都会调用它。
在Vue Router 文档中了解更多。

通用路由器实例

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