Nuxt 3 - onServerPrefetch 生命周期注入 API

Question

[Vue warn]：当没有要关联的活动组件实例时，会调用 onServerPrefetch。生命周期注入 API 只能在 setup() 执行期间使用。如果您使用异步 setup()，请确保在第一个等待语句之前注册生命周期挂钩。

可组合的

const isLoggerdIn = () => {
    return expire.value //return true or false
  }

中间件

export default defineNuxtRouteMiddleware( (to) => {
  const { isLoggerdIn } = useAuth() // composable

  if (isLoggerdIn() && to.name == 'login'){
    return navigateTo("/home")
  }

  if (!isLoggerdIn() && to.name !== 'login'){
    return navigateTo("/login")
  }

})

在主页和登录页面上

definePageMeta({
  middleware: 'auth'
})

Answer 1

我假设在运行该方法时，isLoggerdIn它会调用类似的内容useAsyncData或useFetch其中的内容。

如果是这种情况，那么在调用需要能够访问当前 nuxt 实例的第二个方法时，就会出现您所描述的错误消息。只能猜测，但在你的情况下可能是navigateTo。

在较新版本的 nuxt 中，错误消息将更类似于nuxt instance not available. 这是一些众所周知的行为，并在问题 #14723中进行了跟踪。

与 nuxt 当前版本（至少在 v3.3 之前）兼容的解决方法是使用callWithNuxtcall navigateTo。

在你的例子中它可能看起来像这样：

import { callWithNuxt } from 'nuxt/app'

export default defineNuxtRouteMiddleware( (to) => {
  const { isLoggerdIn } = useAuth() // composable
  
  const nuxtInstance = useNuxtApp()

  if (isLoggerdIn() && to.name == 'login'){
    
    return callWithNuxt(nuxtInstance, () => navigateTo("/home"))
  }

  if (!isLoggerdIn() && to.name !== 'login'){
    
    return callWithNuxt(nuxtInstance, () => navigateTo("/login"))
  }

})

我在这里发布了另一个示例，展示了如何执行此操作。