两种路由模式的URL区别

createWebHashHistory模式下,只有hash符号前的URL会被请求,避免404错误,适合未完全覆盖路由的后端。createWebHistory模式要求前端URL与后端路由匹配,若不匹配会返回404。在线上环境,使用createWebHistory需配置Nginx或Apache,并配合前端404页面。

模式

createWebHashHistory模式

createWebHistory模式

URL

http://localhost:8080/#/Login

http://localhost:8080/Login

两种模式在技术上也有不同之处

  • createWebHashHistory 模式:仅 hash 符号之前的内容会被包括在请求中,如 http://www.ahdai.com ,对于后端来说,即使没有做到路由的全覆盖,也不会返回404错误。

  • createWebHistory 模式:前端的URL 必须和实际向后端发起请求的URL 一致,如http://www.ahdai.com/book/id ,如果后端缺少对/book/id 的路由处理,将会返回404错误。

总知,无论是在开发环境还是线上环境中,createWebHashHistory模式都可以正常地被访问;而createWebHistory模式在开发环境中可以正常运行项目,但在线上环境中需要配置Nginx 或 Apache 作为指向,同时搭配前端路由的404 页面支持。

Hash 路由模式 History 路由模式存在多方面区别,具体如下: - **原理不同**:“History”模式利用浏览器的历史记录栈,通过“history.pushState()”或“replaceState()”方法修改 URL,同时监听“popstate”事件来实现页面跳转,这种模式下,URL 可以看起来像标准页面一样,没有“#”号。“Hash”模式则是通过监听“window.onhashchange”事件来检测 URL 中“#”号后的变化,从而实现对页面内容的更新,这种模式下,URL 中会包含“#”号,但“#”号后的部分不会发送到服务器[^2]。 - **兼容性浏览器要求不同**:“Hash”模式由于使用“#”号,兼容性较高,甚至可以兼容一些老旧的浏览器。“History”模式则使用了 HTML5 的新特性,对浏览器有更高的要求,例如需要 IE10 以上的版本才能使用[^2]。 - **后端配合需求不同**:“History”模式在页面刷新时,如果后端没有正确配置,可能会导致 404 错误。“Hash”模式则不会因为后端配置问题而导致功能失效,因为 hash 不会被包含在 HTTP 请求中,对后端完全没有影响,改变 hash 后刷新也不会有问题[^2][^4]。 - **路由表现不同**:“History”模式的 URL 看起来更传统,没有“#”号,提供更好的用户体验。“Hash”模式的 URL 中包含“#”号,可能会影响 URL 的美观[^2]。 ### 代码示例 以下是简单的 JavaScript 示例,展示两种模式的基本实现: #### Hash 模式 ```javascript // 监听 hash 变化 window.onhashchange = function () { const hash = window.location.hash.slice(1); console.log('当前 hash:', hash); // 根据 hash 进行页面内容更新 }; // 设置 hash window.location.hash = 'page1'; ``` #### History 模式 ```javascript // 监听浏览器前进后退 window.onpopstate = function (event) { console.log('当前 state:', event.state); // 根据 state 进行页面内容更新 }; // 新增历史记录 history.pushState({ page: 'page1' }, 'Page 1', '/page1'); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值