当前位置: 首页>后端>正文

web路由和web hash的路由作用和原理以及路由在打包后不生效的原因分析

web路由器

假设有一个blog界面
那么是
a.com/blog

hash路由

假设有一个blog界面
那么需要这样访问a.com/#/blog

为什么打包后不生效?

比如当访问a.com/blog时,实际上blog不是文件夹也不是文件, 自然404了,
所以一般普通的静态网页服务器,直接部署是无法让路由进行运作的。

那么就需要利用到一个nginx的骚操作,把 这个路径直接指向到默认的首页/index.html
因为index.html做了一系列的逻辑操作, 虽然这个index.html本来是 a.com/index.html的 只有一个,但是经过nginx的部署
让a.com/blog访问后有 实际上 也是访问index.html,在index.html 获取 href时但是得到的会是一个blog,他就会加载不同的逻辑

nginx骚操作代码
try_files $uri $uri/ /index.html;
$uri 就是尝试访问这个路径 ,比如访问的事a.com/bb/cc 那么就是尝试访问bb/cc存不存在,不存在直接定位到首页的index.html,但是它不是一个改变浏览器地址的操作,地址不变的情况下,内部实际上还是等于访问a.com/index.html

http://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
https://juejin.cn/post/6844903856359342087

总结: 我一个index.html我可以拦截所有 子路径,虽然我js本身没这个能力,但是nginx服务器有,它能够把所有的捕捉到的路径全部转给我进行处理,但是我能够根据 不同的url参数显示不同界面,达到了类似 aa/index.html 实际上是另外的文件的效果。实际上它不存在,他指向了aa.

而 hash路由呢因为是类似http://localhost:3333/#/blog实际上它操作的还是首页的index.html 不需要这么做也能找到吧。

另外vite.config.js中
如果是web路由
设置为 // publicDir: '/', 会得到惊喜,发布目录变成回收站,会产生n多垃圾。


https://www.xamrdz.com/backend/3dc1935234.html

相关文章: