Question

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 默认值: '/'

在 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 })
})

相关阅读：dirs > middleware

导航到外部 URL

vue

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

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