navigateTo - 编程式导航 #

navigateTo是一个路由辅助函数，通过编程式导航实现在 Nuxt 应用程序中导航。

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

用法 #

navigateTo (route: string | Route, { redirectCode = 302, replace = false })

route可以是普通字符串或一个重定向的路由对象。

示例 #

Vue Component #

<script setup>
// string
return navigateTo('/search')

// route object
return navigateTo({ path: '/search' })

// route object with query parameters
return navigateTo({
  path: '/search',
  query: {
      name: name.value,
      type: type.value
  }
})
</script>

路由中间件 #

export default defineNuxtRouteMiddleware((to, from) => {
  // 设置 redirectCode 为 301(永久重定向)
  return navigateTo('/search', { redirectCode: 301 })
})

<script setup>
  await navigateTo('/', { replace: true })
</script>

更多路由中间件用法参考: Middleware

选项 #

redirectCode #

• Type: Number

navigateTo会重定向到给定的路由，当重定向发生在服务端时，默认设置重定向代码为302 Found。

这个默认行为可以通过提供不同的redirectCode作为一个可选参数来修改。常见的有301 Moved Permanently，可用于永久重定向。

replace #

• Type: Boolean

默认情况下，navigateTo将给定的路由推送到客户端的 Vue 路由实例中。

这种行为可以通过设置replace: true来改变，以表明给定的路由应该被替换。