useRouter
useRouter composable 返回 router 实例。
pages/index.vue
<script setup lang="ts">
const router = useRouter()
</script>
如果你只需要在模板中使用 router 实例,请使用 $router
pages/index.vue
<template>
<button @click="$router.back()">Back</button>
</template>
如果你有一个 pages/
目录,useRouter
的行为与 vue-router
提供的行为完全相同。
基本操作
addRoute()
: 向 router 实例添加新路由。可以提供parentName
以将新路由添加为现有路由的子路由。removeRoute()
: 通过名称删除现有路由。getRoutes()
: 获取所有路由记录的完整列表。hasRoute()
: 检查是否已存在具有给定名称的路由。resolve()
: 返回路由位置的规范化版本。还包括一个href
属性,其中包含任何现有 base。
示例
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 组件和 composable 中非常有用。基于 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" })
导航守卫
useRouter
composable 提供了 afterEach
、beforeEach
和 beforeResolve
辅助方法,这些方法充当导航守卫。
然而,Nuxt 有路由中间件的概念,它简化了导航守卫的实现,并提供了更好的开发者体验。
Promise 和错误处理
通用 Router 实例
如果你没有 pages/
文件夹,那么 useRouter
将返回一个通用的 router 实例,它具有类似的辅助方法,但请注意,并非所有功能都可能被支持,或者其行为与 vue-router
完全相同。