navigateTo · Nuxt 工具

navigateTo 在客户端和服务器端都可用（但在 Nitro 路由中不可用）。

用法

navigateTo 在服务器端和客户端都可用。它可以在 Nuxt 上下文或直接使用，以执行页面导航。

要从服务器端点发送重定向，请改用 sendRedirect。

在 Vue 组件中

<script setup lang="ts">
// passing 'to' as a string
await navigateTo('/search')

// ... or as a route object
await navigateTo({ path: '/search' })

// ... or as a route object with query parameters
await navigateTo({
  path: '/search',
  query: {
    page: 1,
    sort: 'asc'
  }
})
</script>

在路由中间件中

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // setting the redirect code to '301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }
})

在文档 > 指南 > 目录结构 > 中间件中了解更多信息。

外部链接

navigateTo 中的 external 参数会影响处理 URL 导航的方式

不使用 external: true:
- 内部 URL 按预期导航。
- 外部链接会抛出错误。
使用 external: true:
- 内部 URL 会使用完整页面重新加载进行导航。
- 外部链接按预期导航。

示例

<script setup lang="ts">
// will throw an error;
// navigating to an external URL is not allowed by default
await navigateTo('https://nuxtjs.org.cn')

// will redirect successfully with the 'external' parameter set to 'true'
await navigateTo('https://nuxtjs.org.cn', {
  external: true
})
</script>

使用 open()

<script setup lang="ts">
// will open 'https://nuxtjs.org.cn' in a new tab
await navigateTo('https://nuxtjs.org.cn', {
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})
</script>

类型

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

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

在调用 navigateTo 时，请确保始终使用 await 或 return 获取结果。

参数

`to`

**类型**: RouteLocationRaw | undefined | null

**默认值**: '/'

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

示例

// Passing the URL directly will redirect to the '/blog' page
await navigateTo('/blog')

// Using the route object, will redirect to the route with the name 'blog'
await navigateTo({ name: 'blog' })

// Redirects to the 'product' route while passing a parameter (id = 1) using the route object.
await navigateTo({ name: 'product', params: { id: 1 } })

`options`（可选）

**类型**: NavigateToOptions

一个接受以下属性的对象

replace（可选）
**类型**: boolean
**默认值**: false
默认情况下，navigateTo 将给定路由推入客户端上的 Vue Router 实例。
可以通过将 replace 设置为 true 来更改此行为，以指示应替换给定路由。
redirectCode（可选）
**类型**: number
**默认值**: 302
navigateTo 重定向到给定路径，并在服务器端发生重定向时默认将重定向代码设置为 302 Found。
可以通过提供不同的 redirectCode 来修改此默认行为。通常，301 Moved Permanently 可用于永久重定向。
external（可选）
**类型**: boolean
**默认值**: false
当设置为 true 时，允许导航到外部链接。否则，navigateTo 将抛出错误，因为默认情况下不允许外部导航。
open（可选）
**类型**: OpenOptions
允许使用窗口的 open() 方法导航到 URL。此选项仅适用于客户端，并在服务器端被忽略。
一个接受以下属性的对象
- target
  **类型**: string
  **默认值**: '_blank'
  一个字符串，不包含空格，指定正在将资源加载到的浏览上下文的名称。
- windowFeatures（可选）
  **类型**: OpenWindowFeatures
  一个接受以下属性的对象
  - popup（可选）
    **类型**: boolean
  - width 或 innerWidth（可选）
    **类型**: number
  - height 或 innerHeight（可选）
    **类型**: number
  - left 或 screenX（可选）
    **类型**: number
  - top 或 screenY（可选）
    **类型**: number
  - noopener（可选）
    **类型**: boolean
  - noreferrer（可选）
    **类型**: boolean
  有关 **windowFeatures** 属性的更多详细信息，请参阅文档。

defineRouteRules

在页面级别定义混合渲染的路由规则。

onBeforeRouteLeave

onBeforeRouteLeave 组合式函数允许在组件内注册路由守卫。