如何让Nuxt页面指定错误页面使用对应的布局？

你可以通过以下几种可行方案实现需求，核心思路是让错误页面能获取到页面请求时传递的自定义标识：

方案一：直接通过错误对象传递自定义参数（最简便） #

Nuxt的error方法允许传递自定义字段，错误页面可以通过props接收完整的错误对象，进而在layout函数中读取自定义标识：

页面代码（保持你的原有逻辑） #

<script>
export default {
  layout: 'site',
  async asyncData({ $axios, error, params }) {
    try {
      const site = await $axios.$get(`/sites/${params.site}/`)
      return { site }
    } catch (e) {
      // 传递自定义isSite字段到错误对象
      error({ statusCode: e.response.status, isSite: true })
    }
  },
}
</script>

错误页面修改 #

<template>
  <div>
    <component :is="errorPage" :error="error" />
  </div>
</template>

<script>
export default {
  props: ['error'], // 接收包含自定义字段的错误对象
  layout() {
    // 根据isSite标识选择对应布局
    return this.error.isSite ? 'site' : 'default'
  }
}
</script>

方案二：利用Vuex存储状态（适合多场景共享） #

如果项目使用Vuex，可以在捕获错误时将标识存入状态管理，错误页面读取状态后选择布局：

页面代码修改 #

<script>
export default {
  layout: 'site',
  async asyncData({ $axios, error, params, store }) {
    try {
      const site = await $axios.$get(`/sites/${params.site}/`)
      return { site }
    } catch (e) {
      // 将标识存入Vuex
      store.commit('error/setIsSiteError', true)
      error({ statusCode: e.response.status })
    }
  },
}
</script>

Vuex状态模块示例（store/modules/error.js） #

export const state = () => ({
  isSiteError: false
})

export const mutations = {
  setIsSiteError(state, value) {
    state.isSiteError = value
  }
}

错误页面修改 #

<template>
  <div>
    <component :is="errorPage" :error="error" />
  </div>
</template>

<script>
export default {
  layout() {
    return this.$store.state.error.isSiteError ? 'site' : 'default'
  },
  // 页面销毁时重置状态，避免影响后续错误页面
  beforeDestroy() {
    this.$store.commit('error/setIsSiteError', false)
  }
}
</script>

方案三：路由元信息（依赖路由结构） #

如果你的站点页面是固定动态路由（如pages/sites/_site.vue），可以给路由添加元信息，错误页面通过路由元信息判断：

修改nuxt.config.js路由配置 #

export default {
  router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'site-page',
        path: '/sites/:site',
        component: resolve(__dirname, 'pages/sites/_site.vue'),
        meta: { isSitePage: true }
      })
    }
  }
}

错误页面修改 #

<template>
  <div>
    <component :is="errorPage" :error="error" />
  </div>
</template>

<script>
export default {
  layout(context) {
    return context.route.meta.isSitePage ? 'site' : 'default'
  }
}
</script>

注：此方案仅依赖路由路径，无法验证API请求是否真的返回无效站点，仅适合路由与站点强绑定的场景。

内容的提问来源于stack exchange，提问作者bodger