navigateTo

navigateTo是一个路由器辅助函数，允许以编程方式在您的 Nuxt 应用程序中导航用户。

navigateTo 在服务器端和客户端都可用。 它可以在插件、中间件中使用，也可以直接调用以执行页面导航。

Type

ts
navigateTo(to: RouteLocationRaw | undefined | null, options?: NavigateToOptions) => Promise<void | NavigationFailure> | RouteLocationRaw

interface NavigateToOptions {
  replace?: boolean
  redirectCode?: number
  external?: boolean
}

确保在调用时始终对 navigateTo 的结果使用 await 或 return。

Parameters

to 类型: RouteLocationRaw | undefined | null 默认值: '/'

to 可以是纯字符串或要重定向到的路由对象。 当作为undefined或null传递时，它将默认为/。

options (可选) 类型: NavigateToOptions

接受以下属性的对象：

  • replace (可选) 类型: boolean 默认值: false
    默认情况下，navigateTo 将给定的路由推送到客户端的 Vue Router 实例中。
    可以通过将 replace 设置为 true 来更改此行为，以指示应替换给定的路由。
  • redirectCode (可选) 类型: number 默认值: 302
    navigateTo 重定向到给定的路径，并在重定向时默认将重定向代码设置为 302 Found 发生在服务器端。
    可以通过提供不同的 redirectCode 来修改此默认行为。 通常，301 永久移动 可用于永久重定向。\
  • external (可选) 类型: boolean 默认值: false
    设置为“true”时允许导航到外部 URL。 否则，navigateTo 将抛出错误，因为默认情况下不允许外部导航。

示例

在 Vue 组件内导航

vue
<script setup>
// 将“to”作为字符串传递
await navigateTo('/search')

// ...或作为路线对象
await navigateTo({ path: '/search' })

// ...或作为带有查询参数的路由对象
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

在路由中间件内导航

ts
export default defineNuxtRouteMiddleware((to, from) => {
  // 将重定向代码设置为“301 永久移动”
  return navigateTo('/search', { redirectCode: 301 })
})
相关阅读：docs > nuxtjs > dirs > middleware

导航到外部 URL

vue
<script setup>
// 会抛出错误；
// 默认情况下不允许导航到外部 URL
await navigateTo('https://nuxt.com')

// 将“外部”参数设置为“真”时成功重定向
await navigateTo('https://nuxt.com', {
  external: true
})
</script>