如何阻止Nuxt访问无效路径及特定WordPress路径时跳转Error布局？

针对你需要让特定路径（及子路径）跳过错误页、直接托管WordPress的需求，这里提供几种可行方案：

方案1：通过路由配置跳过错误判定 #

在项目配置文件中扩展路由规则，为目标路径添加兜底路由，让框架不将其判定为无效路径：

// 以Nuxt.js为例，在nuxt.config.js中配置
export default {
  router: {
    extendRoutes(routes, resolve) {
      // 假设WordPress托管路径为/wp/*
      routes.push({
        path: '/wp/*',
        component: resolve(__dirname, 'components/WordPressProxy.vue')
      })
    }
  }
}

创建WordPressProxy.vue组件，通过iframe或代理加载WordPress内容：

<template>
  <iframe src="你的WordPress站点地址" frameborder="0" style="width:100%;height:100vh;"></iframe>
</template>

这种方式会让框架认为/wp/开头的路径都是有效路由，不会触发error.vue。

方案2：全局中间件拦截错误触发 #

编写全局中间件，拦截特定路径的错误逻辑：
在middleware/skipError.js中：

export default function ({ route, error, redirect }) {
  if (route.path.startsWith('/wp/')) {
    // 清除已触发的错误状态
    error.value = null
    // 直接重定向到WordPress对应路径
    redirect(`https://your-wordpress-site.com${route.path}`)
  }
}

在配置文件中注册全局中间件：

export default {
  router: {
    middleware: ['skipError']
  }
}

方案3：自定义错误处理逻辑 #

在插件中覆盖框架默认的错误处理：
在plugins/errorHandler.js中：

export default function ({ app }) {
  app.router.onError((err) => {
    const currentPath = app.router.currentRoute.path
    if (currentPath.startsWith('/wp/')) {
      // 跳转到WordPress对应页面，不渲染error.vue
      window.location.href = `https://your-wordpress-site.com${currentPath}`
      return
    }
    // 其他路径保留默认错误处理
    app.error.value = err
  })
}

在配置文件中注册插件：

export default {
  plugins: ['~/plugins/errorHandler.js']
}

如果希望从根源上避免触发错误页，方案1更符合路由设计逻辑；若需要直接跳转独立WordPress站点，方案2或3更直接。

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