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

在文档 > 指南 > 目录结构 > 中间件中阅读更多内容。

外部 URL

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

不使用 external: true:
- 内部 URL 按预期导航。
- 外部 URL 抛出错误。
使用 external: true:
- 内部 URL 会以完整页面重新加载的方式导航。
- 外部 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 时，允许导航到外部 URL。否则，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 composable 允许在组件中注册路由守卫。