Nuxt3【内置的工具函数】2024最新版

网络请求相关

$fetch

用于在Vue应用程序或API路由中进行HTTP请求，详见 https://blog.csdn.net/weixin_41192489/article/details/141348349

refreshNuxtData

重新从服务器获取所有数据并更新页面。
详见 https://blog.csdn.net/weixin_41192489/article/details/141348349

setResponseStatus

设置响应的状态码（可选地设置状态消息）

const event = useRequestEvent()

// 将状态码设置为404以显示自定义404页面
setResponseStatus(event, 404)

// 同时设置状态消息
setResponseStatus(event, 404, '页面未找到')

在浏览器中，setResponseStatus函数不会产生任何效果。

路由相关

navigateTo

用于以编程方式导航（路由跳转）

• Vue组件中

// 将'to'作为字符串传递
await navigateTo('/search')

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

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

// 默认情况下不允许导航到外部URL,将抛出错误
await navigateTo('https://nuxt.com')

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

// 使用open()，将在新标签页中打开'https://nuxt.com'
await navigateTo('https://nuxt.com', {  
  open: {
    target: '_blank',
    windowFeatures: {
      width: 500,
      height: 500
    }
  }
})

• 路由中间件中

  if (to.path !== '/search') {
    // 将重定向代码设置为'301 Moved Permanently'
    return navigateTo('/search', { redirectCode: 301 })
  }

abortNavigation

用于阻止导航的发生，只能在路由中间件中使用。

  // 无权限时，禁止导航
  if (!user.value.isAuthorized) {
    return abortNavigation()
  }

  if (!user.value.isAuthorized) {
    // 可以将错误作为字符串传递
    return abortNavigation('权限不足。')
  }

  try {
    /* 可能会抛出错误的代码 */
  } catch (err) {
    // 也可返回错误对象
    return abortNavigation(err)
  }

addRouteMiddleware

用于动态添加中间件
https://www.nuxt.com.cn/docs/api/utils/add-route-middleware

defineNuxtRouteMiddleware

创建具名的路由中间件（middleware 目录中的文件都要用到！）

middleware/error.ts

export default defineNuxtRouteMiddleware((to) => {
  if (to.params.id === '1') {
    throw createError({ statusCode: 404, statusMessage: '页面未找到' })
  }
})

onBeforeRouteLeave

在组件内注册路由守卫

onBeforeRouteUpdate

在组件内注册路由守卫

prerenderRoutes

指示Nitro预渲染额外的路由。

prerenderRoutes('/')
prerenderRoutes(['/', '/about'])

在浏览器中或在预渲染之外调用时，prerenderRoutes将没有任何效果。

preloadRouteComponents

手动预加载Nuxt应用中的单个页面。

如果使用NuxtLink组件，Nuxt已经自动预加载了必要的路由。

preloadRouteComponents('/目标路由')

在服务器上，preloadRouteComponents没有任何效果。

【实验中】defineRouteRules

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

https://www.nuxt.com.cn/docs/api/utils/define-route-rules

清除数据

clearNuxtData

删除 useAsyncData 和 useFetch的缓存数据、错误状态和待处理的 promises，用于使另一个页面的数据获取失效。

参数为一个或多个在 useAsyncData 中使用的键，用于删除它们的缓存数据。如果没有提供键，将会使所有数据失效。

clearNuxtState

删除 useState的缓存状态，用于使 useState 的状态失效

参数为一个或者多个在 useState 中使用的键，用于删除它们的缓存状态。如果没有提供键值，将会使 所有状态 失效。

组件相关

definePageMeta

为页面组件定义元数据。

definePageMeta({
  layout: 'default'
})

完整配置项见 https://www.nuxt.com.cn/docs/api/utils/define-page-meta

defineNuxtComponent

使用Options API定义类型安全的Vue组件。

https://www.nuxt.com.cn/docs/api/utils/define-nuxt-component

preloadComponents

预加载组件

默认情况下，Nuxt将这些组件注册为异步组件。你必须使用帕斯卡命名法（Pascal-cased）的组件名称。

await preloadComponents('MyGlobalComponent')

await preloadComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])

在服务器上，preloadComponents 不会产生任何效果。

prefetchComponents

用于预取组件（该组件会被下载并缓存，以便未来的使用，而无需用户明确请求。）

await prefetchComponents('MyGlobalComponent')

await prefetchComponents(['MyGlobalComponent1', 'MyGlobalComponent2'])

在服务器上，prefetchComponents 不会产生任何效果。

错误相关

showError

显示全屏错误页面。

showError("😱 哦不，一个错误被抛出了。")
showError({
  statusCode: 404,
  statusMessage: "页面未找到"
})

createError

使用附加元数据创建一个错误对象

throw createError({ statusCode: 404, statusMessage: '页面未找到' })

clearError

清除所有已处理的错误。

// 不进行重定向
clearError()

// 进行重定向
clearError({ redirect: '/homepage' })

其他

setPageLayout

动态地改变页面的布局

setPageLayout依赖于对Nuxt上下文的访问权限，并且只能在组件的setup函数、插件和路由中间件中调用。

如果你选择在服务器端动态设置布局，你必须在布局被Vue渲染之前（即在插件或路由中间件中）进行设置

middleware/custom-layout.ts

export default defineNuxtRouteMiddleware((to) => {
  // 在你要导航到的路由上设置布局
  setPageLayout('other')
})

updateAppConfig

在运行时更新应用配置

使用深度赋值方式更新app.config。现有的（嵌套的）属性将被保留。

const appConfig = useAppConfig() // { foo: 'bar' }

const newAppConfig = { foo: 'baz' }

updateAppConfig(newAppConfig)

console.log(appConfig) // { foo: 'baz' }

onNuxtReady

在应用程序完成初始化后运行回调函数，适合运行不应阻塞应用程序初始渲染的代码。

• 仅在客户端运行。

plugins/ready.client.ts

export default defineNuxtPlugin(() => {
  onNuxtReady(async () => {
    const myAnalyticsLibrary = await import('my-big-analytics-library')
    // 使用myAnalyticsLibrary进行一些操作
  })
})

【实验中】 reloadNuxtApp

对你的应用进行强制刷新。

https://www.nuxt.com.cn/docs/api/utils/reload-nuxt-app