astro路由忽略大小写

最新推荐文章于 2024-07-16 17:34:03 发布

gxsww

最新推荐文章于 2024-07-16 17:34:03 发布

阅读量69

点赞数

文章标签：前端框架 node.js

本文链接：https://blog.csdn.net/gxsww/article/details/130866072

版权

正常情况下网址是不区分大小写的，但是astro的路由是严格区分大小写的，这个对于一般需求问题也不大，但我们之前的网站已有pc端，现在用astro来做移动端，为了方便手机访问pc端的时候可以自动跳转到移动端，我们的页面都是一一对应的。因为pc端不是astro做的，路由是不区分大小写的，就没办法做到一一对应(包括大小写)，找了很久也没有找到更好的办法，于是想到用404页面处理。

因为并不是所有页面都是动态页面，静态页面就直接放在public目录下了，这里同样是区分大小写的，也要做一下处理，下面把404页面放上来。

---
let url = Astro.request.url;
if (url.toLowerCase().indexOf(".html") >= 0) {
  url = url.toLowerCase();
  const data = import.meta.glob("../../public/*.html");
  const routes: any[] = [];
  for (const item in data) {
    let arrFileNames = item.split("/");
    let fileName = arrFileNames[arrFileNames.length - 1];
    routes.push({ lowerName: fileName.toLowerCase(), fileName });
  }
  const arrUrls = url.split('/');
  const currentPath =arrUrls[arrUrls.length-1]
  const matchedRoute = routes.find(route => route.lowerName === currentPath);
  if(matchedRoute){
    return Astro.redirect('/'+matchedRoute.fileName);
  }
}
if(url.match(/[A-Z]/)){
  url = url.toLowerCase();
  return Astro.redirect(url);
}

---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>404</title>
  </head>
  <body> 页面不存在</body>
</html>

gxsww

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
astro路由忽略大小写

正常情况下网址是不区分大小写的，但是astro的路由是严格区分大小写的，这个对于一般需求问题也不大，但我们之前的网站已有pc端，现在用astro来做移动端，为了方便手机访问pc端的时候可以自动跳转到移动端，我们的页面都是一一对应的。因为pc端不是astro做的，路由是不区分大小写的，就没办法做到一一对应(包括大小写)，找了很久也没有找到更好的办法，于是想到用404页面处理。
复制链接

扫一扫