Nuxt2.x Error页面返回自定义请求状态码

一、问题描述

最近接到一个需求,针对Nuxt2.x的一个项目进行SEO优化,需要对404页面的状态进行修改,将404页面的请求状态码改为301,而不是404:

在这里插入图片描述

二、解决方案

1.几种无效尝试

(1)layouts下的error.vue文件中使用asyncData重设statusCode:

刚开始的思路是直接在layouts下的error.vue文件中进行设置:

  // 设置状态码为301async asyncData({ res }) {res.statusCode = 301;}

关于asyncDataAPI的介绍可以查看官网文档的介绍:

在这里插入图片描述
其中content如下:

在这里插入图片描述

但实际上,上述的做法这是无效的。因为asyncDatalayouts下的error.vue中并不会执行,可以看一下官方文档的这段描述:

asyncData. This hook can only be placed on page components. Unlike fetch, this hook does not display a loading placeholder during client-side rendering: instead, this hook blocks route navigation until it is resolved, displaying a page error if it fails.

(2)使用middleware

// middleware\setStatusCode.jsexport default function (context) {// 当访问的路由不存在时,context.res.statusCode此时也为200,也无法像下面那样使用context.error判断// if (context.error && context.error.statusCode === 404) {//   context.res.statusCode = 301;// }const routeName = context.route.name;const isPageExist = context.app.router.options.routes.some(route => route.name === routeName);if (isPageExist) {console.log(`The page ${routeName} exists`);} else {console.log(`The page ${routeName} does not exist`);context.res.statusCode = 301;}
}
// nuxt.config.js
router: {...,middleware: [ 'setStatusCode'],...
}

在这里插入图片描述
这种方式如果对于正常存在的路由,是可以在middleware中进行有效的修改,但是对于不存在的路由则无效,结果返回客户端的状态码依然是404。

2.可行方案

创建pages\error.vue结合asyncData

<template><div class="page-404"><div><img src="~/assets/images/error.png" alt="页面404"></div></div>
</template><script>
export default {// 设置状态码为301async asyncData({ res }) {res.statusCode = 301;}
}
</script>

注:pages\error.vue中的error不要使用动态路由命名(即以下划线_开头:_error),因为它可能会与nuxt.config.jsrouter.extendRoutes里定义的动态路由冲突,而默认情况下pages\error.vue会优先匹配(如果想知道为什么,可以查看项目根目录下.nuxt\router.js,这个看看到nuxt最终生成的routes,在里面可以看到routes数组里path: "/:error"会出现在router.extendRoutes里定义的动态路由前面。当然如果非要使用_error, 那么可以在尝试nuxt.config.jsrouter.extendRoutes里调整path: "/:error"的顺序)。

现在访问一下/error路径看看:
在这里插入图片描述

但上述这种方式只能针对一级访问路径/xxx(比如,/error)不存在的情况,如果访问的路径是多级(比如,/xxx/xxx)的时候,客户端收到的响应码依然是404:

在这里插入图片描述

因此,我们需要针对无效访问的路径进行路由匹配定义:

// nuxt.config.jsrouter: {extendRoutes (routes, resolve) {routes.push(...,{name: 'errorPage',path: '*',component: resolve(__dirname, 'pages/error.vue')})}
}

那么现在只要访问的链接不存在,nuxt返回给客户端的状态码就是301。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/642936.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

多家头部企业宣布「启动鸿蒙原生应用开发」,你看好鸿蒙系统走向「独立」吗?

我觉得跟着国家对鸿蒙的推进&#xff0c;就知道发展前景肯定是没错的。并且现在已经走向独立道路。 华为鸿蒙是国家主推的操作系统项目&#xff0c;而之前由于美丽国的一系列制裁后。华为也终于崛起&#xff1b;在1月18号的华为鸿蒙仪式中&#xff0c;推出了HarmonyOSNEXT星空…

Java基础 - 09 Set之linkedHashSet , CopyOnWriteArraySet

LinkedHashSet和CopyOnWriteArraySet都是Java集合框架提供的特殊集合类&#xff0c;他们在特定场景下有不同的用途和特点。 LinkedHashSet是Java集合框架中的一种实现类&#xff0c;它继承自HashSet并且保持插入顺序。它使用哈希表来存储元素&#xff0c;并使用链表来维护插入…

centos查看1分钟内修改过的文件

linux查看1分钟内修改过的文件 find / -name ‘.’ -mmin -1 查询1分钟内修改过的日志 查询根目录下以log结尾&#xff0c;1分钟内修改过的文件 find / -name ‘*.log’ -mmin -1 下面的命令是查询当前目录下所有的文件&#xff0c;并且在30分钟内修改过的文件 这个可以根…

前端JavaScript篇之Javscript数组的常用方法有哪些?JavaScript判断数组的方式有哪些?

目录 Javscript数组的常用方法有哪些&#xff1f;JavaScript判断数组的方式有哪些&#xff1f;1. Array.isArray() 方法&#xff1a;2. instanceof 操作符&#xff1a;3. Object.prototype.toString.call() 方法&#xff1a;4. Array.from() 方法&#xff1a; Javscript数组的常…

Git学习笔记(第3章):Git常用命令

目录 3.1 设置用户签名 3.2 初始化本地库 3.3 查看本地库状态 3.4 添加暂存区 3.5 提交本地库 3.6 历史版本 3.7 修改文件 3.8 版本穿梭 小结 命令 作用 git config --global user.name 用户名 设置用户签名 git config --global user.email 邮箱 设置用户签名 …

Java如何优雅地判断对象是否为空

点击下载《Java如何优雅地判断对象是否为空》 1. 前言 在实际项目中&#xff0c;我们经常需要对各种变量或对象进行判空校验。这是因为&#xff0c;如果不进行判空校验&#xff0c;当遇到空值时&#xff0c;可能会导致程序出现NullPointerException异常。这是一种常见的运行时…

【INTEL(ALTERA)】为什么 Nios® V/g 处理器无法从指令紧耦合内存 (TCM) 启动?

说明 由于英特尔 Quartus Prime Pro Edition 软件版本 23.3 对Nios V/g 处理器的限制&#xff0c;Nios V/g 处理器无法直接从内存初始化的指令 TCM 启动。 造成这个问题的主要原因是指令中药只能作为指令存储器访问&#xff08;不支持作为指令和数据存储器&#xff09;。因此…

全国各城市绿地及绿化面积数据,shp/excel格式,2020-2022年

基本信息. 数据名称: 全国各城市绿地及绿化面积数据 数据格式: Shp、excel 数据时间: 2020-2022年 数据几何类型: 面 数据坐标系: WGS84 数据来源&#xff1a;网络公开数据 数据字段&#xff1a; 序号字段名称字段说明1province省份名称2city城市名称4city_dm城市…

2401llvm,clang语法树简介

原文 ClangAST简介 幻灯片 介绍 Clang的AST与其他一些编译器生成的AST不同,因为它与编写的C代码和C标准类似.如,在AST中,按非简化形式提供括号式和编译时常量. 这使得Clang的AST非常适合重构. 可通过生成的Doxygen获得所有ClangAST节点的文档.搜索引擎也会索引doxygen的在…

Servlet对象

ServletConfig对象 是什么 ServletConfig是javax.servlet.包下的一个接口&#xff0c;ServletConfig它是Servlet的一个配置对象&#xff1b; ServletConfig是由tomcat容器创建&#xff0c;通过init方法传入给Servlet&#xff1b; ServletConfig对象如何获取? 在GenericServle…

SpringBoot连接mysql数据库相关配置(druid连接池)

一、引入mysql8依赖 <dependency><groupId>mysql</groupId><artifactId>mysql-connector-java</artifactId><version>8.0.23</version></dependency><dependency><groupId>com.alibaba</groupId><artifa…

【python】python实现代码雨【附源码】

欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 一、效果图&#xff1a; 二、准备工作 &#xff08;1)、导入必要的模块&#xff1a; 代码首先导入了需要使用的模块&#xff1a;requests、lxml和csv。 import requests from lxml import etree import csv 如果出现模…

Linux大老都是怎么记住这么多命令的?

今天给大家带来的是面试/实际工作中经常用到的Linux相关操作命令: 一. vi/vim编辑器 ---->文本编辑器 作用&#xff1a;创建文件&#xff0c;编辑文件&#xff0c;查看文件 格式&#xff1a;vi/vim 文件的名字 解析&#xff1a;如果该文件不存在&#xff0c;vi就会创建该…

logback配置xml日志文件(保姆级教程)

前言 这是个啥,这就是个控制日志输出格式、控制日志输出位置、控制日志输出环境、控制日志输出级别的玩意、控制忽略输出的日志就这些功能,没有什么很复杂的东西,废话不说多了。 配置介绍 configuration <configuration scan="true" scanPeriod="10 s…

外包干了一个月,技术退步明显。。。。。

先说一下自己的情况&#xff0c;本科生&#xff0c;19年通过校招进入南京某软件公司&#xff0c;干了接近4年的功能测试&#xff0c;今年年初&#xff0c;感觉自己不能够在这样下去了&#xff0c;长时间呆在一个舒适的环境会让一个人堕落!而我已经在一个企业干了四年的功能测试…

【QML COOK】- 012-在QML中使用OpenGL渲染

本文是参照了两个文章编写的。 一是QML的例子&#xff1a;Scene Graph - OpenGL Under QML | Qt Quick 6.6.1 二是关于SceneGraph的介绍&#xff1a;Qt Quick Scene Graph | Qt Quick 6.2.11 这里我提取一下重点方便大家理解。 一个QML程序只能用一种计算机图形接口。不能有…

基于SpringBoot Vue美食网站系统

大家好✌&#xff01;我是Dwzun。很高兴你能来阅读我&#xff0c;我会陆续更新Java后端、前端、数据库、项目案例等相关知识点总结&#xff0c;还为大家分享优质的实战项目&#xff0c;本人在Java项目开发领域有多年的经验&#xff0c;陆续会更新更多优质的Java实战项目&#x…

测试工程师必看!测试用例设计全解析,让你彻底掌握

测试工程师在入行时&#xff0c;都会接触到一个名词——测试用例&#xff0c;都知道测试用例是干什么用的&#xff0c;提到设计测试用例的方法&#xff0c;大部分测试工程师都会侃侃而谈&#xff1a;等价类法、边界值法、判定表法、正交分解法……这些方法说起来都如数家珍&…

MySQL的MVCC

MVCC&#xff08;多版本并发控制&#xff09;multiversion concurrency control 读读并发&#xff1a;可以并发 读写并发&#xff08;innoDB&#xff09;&#xff1a;MVCC机制解决 写写&#xff1a;互斥 快照读&#xff1a;不加锁的简单select属于快照读&#xff0c;即不加…

揭秘大数据时代的内存数据存储、数据缓存:redis缓存框架!

介绍&#xff1a;Redis 是一个开源的、基于内存的数据存储系统&#xff0c;它也可以持久化数据到硬盘上。Redis 以其高性能、高可靠性和丰富的数据结构支持而著称&#xff0c;在现代应用程序中被广泛用作数据库、缓存和消息中间件。 主要特点&#xff1a; 键值存储&#xff1a;…