Rewrite

一: 使用场景 类似新闻列表+新闻详情这种页面结构

一: 大致的逻辑描述(拿新闻列表页面为例)
1: 建立新闻列表页面 页面地址: /news/index   
2: 新闻列表页面访问的页面路由为 /news/1.html  (1.html中的1为新闻分类id)
3: 通过Nginx重写访问地址 重写之后变成 /news?id=1
4: 在通过Nuxt插件将地址转换成 /news/1.html (最终浏览器展示的地址为 /news/1.html)
5: 做Rewrite这个步骤的目的是为了让蜘蛛爬取时返回的是200状态码，而不是301, 302 会影响收录。

二: 关于分页处理(拿新闻列表举例)
1: 分页处理不能再当前页面做数据的切换,要通过切换页面的方式进行数据的切换,页面地址为 /news/index。
2: 分页点击后,跳转页面,跳转路径为 /news/1-page-2.html (1-page-2.html中的1为新闻分类id, 2为分页页码)
3: 通过Nginx重写访问地址 重写之后变成 /news?id=1&page=2
4: 在通过Nuxt插件将地址转换成 /news/1-page-2.html (最终浏览器展示的地址为 /news/1-page-2.html)

三: 服务端Nginx配置示例
 #活动
rewrite "^/activity/details/([0-9]+)\.html$" /activity/details?id=$1 last;
rewrite "^/activity/([0-9]+)\.html$" /activity?id=$1 last;

 #新闻详情
rewrite "^/news/detail/([0-9]+)\.html$" /news/detail?id=$1 last;
        
#新闻分类
rewrite "^/news/([0-9]+)\.html$" /news?id=$1 last;
rewrite "^/news/([0-9]+)-page-([0-9]+)\.html$" /news?id=$1&page=$2 last;
        
#会员中心
rewrite "^/member/info/([0-9]+)\.html$" /member/info/?id=$1 last;
rewrite "^/member/info/([0-9]+)-page-([0-9]+)\.html$" /member/info?id=$1&page=$2 last;

四: 本地开发也需要配置Nginx的Rewrite规则, 否则无法正常访问到对应的页面。

二: 官网分类列表/详情内容页数据调用流程

新闻分类

一: 进入页面nuxt 路由判断路径是否正确,当详情页id不存在时,也属于路径错误,nuxt抛出异常,调用createError展示404页面

1:示例路径: https://202502chpa.iwxh5.cn/news/.html

2: 这个情况下走不到页面级的逻辑处理

二: 当id存在,但是id错误时,在后台取不到正确的分类数据时,分类接口抛出error=1,页面级逻辑判断error=1时直接showError展示404页面

1:示例路径:

https://202502chpa.iwxh5.cn/news/7634-ABC.html //分类默认页

https://202502chpa.iwxh5.cn/news/7634-ABC-page-2.html 带分页的分类页

2: 这个情况下正常走调用逻辑进行404抛出异常

①: 使用 await useAsyncData 调用 新闻api getChannelLists 获取分类数据 response

②: 判断response.error是否为1或者没有分类数据 ,为1代表分类信息不存在,,直接showError

三: 当id存在, 并且id可以取到分类数据,就正常获取数据,渲染页面

1:示例路径:

https://202502chpa.iwxh5.cn/news/764.html //分类默认页

https://202502chpa.iwxh5.cn/news/764-page-2.html 带分页的分类页

2: 这个情况下正常走调用逻辑

①: 使用 await useAsyncData 调用 新闻api getChannelLists 获取分类数据 response

②: 调用新闻列表接口,获取分类下的具体列表

③:设置seo

④:在onMouted下设置面包屑

四: 当id存在, 但是分页变量为一个字符串或者是字母时不符合规则,直接404

1:示例路径:

https://202502chpa.iwxh5.cn/news/764-page-ww.html

2: 这个情况下正常走调用逻辑 ①: 使用 await useAsyncData 调用 新闻api getChannelLists 获取分类数据 response

②:判断路由上的page变量是否符合需求,不符合直接404

新闻详情

一: 进入页面nuxt 路由判断路径是否正确,当详情页id不存在时,也属于路径错误,nuxt抛出异常,调用createError展示404页面

1:示例路径: https://202502chpa.iwxh5.cn/news/detail/.html

2: 这个情况下走不到页面级的逻辑处理

二: 当id存在,但是id错误时,在后台取不到正确的数据时,新闻接口抛出error=1,页面级逻辑判断error=1时直接showError展示404页面

1:示例路径:

https://202502chpa.iwxh5.cn/news/detail/10.html

2: 这个情况下正常走新闻调用逻辑

①: 使用 await useAsyncData 调用 新闻api getArticleInfo 获取response

②: 判断response.error是否为1 ,为1代表新闻信息不存在,,直接showError

三: 当id存在, 并且id可以取到新闻数据,就正常获取数据,渲染页面

1:示例路径:

https://202502chpa.iwxh5.cn/news/detail/18263.html

2: 这个情况下正常走新闻调用逻辑

①: 使用 await useAsyncData 调用 新闻api getArticleInfo 获取response

②: 判断response.error是否为1 ,不为1代表新闻信息存在,,直接处理新闻数据

③: 新闻数据获取成功,设置页面的seo信息

其他的注意点 :

1: 网页其他地方跳转到做过Rewrite重写的页面 需要通过原生a标签跳转,强制跳转会走Nginx的Rewrite规则,不然应用为单页面应用,不会走重写规则

2: 404展示逻辑不在api内部调用,在业务层调用