美文网首页
web路由和web hash的路由作用和原理以及路由在打包后不生

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

作者: 吉凶以情迁 | 来源:发表于2023-08-01 14:26 被阅读0次

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多垃圾。

相关文章

  • 路由

    路由 路由的定义用于和终端用户进行交互可以在routes/web.php中定义web路由,用于终端用户进行访问,也...

  • 手写React Router

    原理 目前常见的路由分为两种,HashRouter和BrowserRouter HashRouter hash路由...

  • 理解路由

    理解Web路由 什么是路由 在Web开发过程中,经常会遇到『路由』的概念。那么,到底什么是路由?简单来说,路由就是...

  • 前端中的 hash 和 history 路由

    前端路由有有 hash 路由和 history 路由两种路由方式,他们的原理是什么,又怎样实现一个简单的路由监听呢...

  • 2020-06-03面试--vue基础篇

    1,vue的路由实现原理有哪几种 答案:Vue的路由实现:hash模式 和 history模式 hash模式:在浏...

  • vue基础-路由(重要)

    前端路由的概念与原理 什么是前端路由 Hash 地址与组件之间的映射关系,前端路由可以将hash地址和组件关联起来...

  • web路由那些事儿(二)

    在《web路由那些事儿(一)》中,对web路由的概念以及基础有了基本的了解,具体参见——http://www.ji...

  • Vue-Router路由构建

    一、前端路由和后端路由 1.1 路由 路由就是通过互联的网络把信息从源地址传输到目的地址的活动。在Web的路由中,...

  • 2020-06-03面试--vue基础篇

    ####1,vue的路由实现原理有哪几种 答案:Vue的路由实现:hash模式 和 history模式 hash模...

  • Vue 路由router

    路由 路由是基于hash 和 history 封装的 hash history 路由在vue中使用流程 ps. 如...

网友评论

      本文标题:web路由和web hash的路由作用和原理以及路由在打包后不生

      本文链接:https://www.haomeiwen.com/subject/tlaypdtx.html