Nuxt3 中文课程《实战全栈开发简书》限时优惠

navigateTo

navigateTo是一个帮助函数,用于以编程方式导航用户。
navigateTo在服务器端和客户端均可使用。

用法

在Vue组件中

<script setup lang="ts">
// 将'to'作为字符串传递
await navigateTo('/search')

// ... 或者作为路由对象传递
await navigateTo({ path: '/search' })

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

在路由中间件中

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.path !== '/search') {
    // 将重定向代码设置为'301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }
})
Read more in Docs > Guide > Directory Structure > Middleware.

外部URL

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

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

使用open()

<script setup lang="ts">
// 将在新标签页中打开'https://nuxt.com'
await navigateTo('https://nuxt.com', {  
  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时,请确保始终使用awaitreturn来处理其结果。

参数

to

类型RouteLocationRaw | undefined | null

默认值'/'

to可以是一个简单的字符串或一个重定向的路由对象。当传递undefinednull时,它将默认为'/'

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
      • widthinnerWidth(可选)
        类型number
      • heightinnerHeight(可选)
        类型number
      • leftscreenX(可选)
        类型number
      • topscreenY(可选)
        类型number
      • noopener(可选)
        类型boolean
      • noreferrer(可选)
        类型boolean

      有关windowFeatures属性的更详细信息,请参阅文档