hash路由模式与history路由模式的区别是什么？

时间: 2023-04-04 15:03:05 浏览: 177

vue-router中的hash和history两种模式的区别

5星 · 资源好评率100%

Vue-router是Vue.js的官方路由管理器。它和Vue.js的深度集成，让构建单页面应用变得非常容易。Vue-router支持两种路由模式，分别是hash模式和history模式。下面详细解释这两种模式的区别。 ### hash模式 hash模式是早期基于浏览器历史记录管理的前端路由模式。它利用了URL中的hash（即URL中的#符号）的变化来改变浏览器历史记录。当页面加载时，hash值不会被包含在HTTP请求中。因此，即使改变了hash值，也不会重新加载页面。 #### hash模式工作原理 hash模式背后的原理基于onhashchange事件。该事件会在浏览器窗口的hash值发生变化时被触发。通过监听这个事件，JavaScript可以捕获到hash值的变化，然后执行相应的逻辑。 ```javascript window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body.style.color = hash; } ``` 以上代码展示了一个简单的hash变化监听示例，它通过改变hash值来改变页面上的字体颜色。实际上，页面状态的变化与hash值变化绑定，从而实现了不刷新页面的情况下，响应URL变化。 ### history模式 history模式基于HTML5提供的history API。与hash模式不同，使用history模式可以让URL看起来更美观，因为它不需要URL中包含#符号。history模式利用pushState和replaceState两个方法来实现前端路由管理。 #### history模式工作原理 HTML5的history API包含两个主要方法：pushState和replaceState。这两个方法允许我们对浏览器历史记录进行管理，能够控制浏览器历史记录栈中的记录。 ```javascript history.pushState({color:'red'}, 'red', 'red'); window.onpopstate = function(event) { console.log(event.state); if (event.state && event.state.color === 'red') { document.body.style.color = 'red'; } }; ``` 在这个示例中，我们使用pushState将一个状态对象以及一个标题和URL压入历史记录。当用户点击浏览器的后退按钮时，popstate事件会被触发，然后可以通过event.state访问之前压入的状态对象。 ### hash模式和history模式的区别 1. **URL变化**：hash模式会将路由信息放在URL的#后面，而history模式的URL看起来更干净，没有#。 2. **历史记录**：hash模式改变时，浏览器的历史记录会增加一个记录项。history模式的改变则可以控制浏览器历史记录，可以进行前进、后退以及跳转操作。 3. **对服务器的影响**：hash模式下，改变hash不会向服务器发送请求，而是仅在前端进行处理；history模式下，前端路由的改变看起来更像是在向服务器发送请求，如果服务器没有对应处理，则会返回404。 4. **前端路由自由度**：history模式提供了更高的自由度，可以自由设计路径，而hash模式则只能在URL的#后面做文章。 5. **后端配置**：使用history模式时，后端需要进行配置，确保任何路由变化都能返回相同的应用页面，以避免404错误。 ### 结论 Vue-router的hash模式适用于不需要考虑SEO和服务器配置的情况，它不需要后端配合即可使用，适合早期单页应用。而history模式更适合现代的前端路由，能够提供更加美观的URL，但需要后端服务器的支持，避免刷新时产生404错误。开发者在选择路由模式时，应根据项目需求和服务器配置来进行选择。

hash路由模式和history路由模式是两种前端路由模式，它们的主要区别在于URL的表现形式不同。hash路由模式使用URL中的#符号来表示路由，而history路由模式则使用HTML5的history API来实现路由。在hash路由模式下，URL中#后面的内容被认为是路由地址，而在history路由模式下，URL中的路径被认为是路由地址。此外，history路由模式可以使用浏览器的前进和后退按钮来控制路由，而hash路由模式则不能。

阅读全文

hash路由模式与history路由模式的区别是什么？

相关推荐

Vue-router 中hash模式和history模式的区别

Vue下路由History模式打包后页面空白的解决方法

路由模式区别 hash history

路由模式hash和history有什么区别

Vue 路由的hash 模式和history 模式有什么区别

路由模式hash和history区别

Vue的路由hash模式和 history模式的区别

react-routerV5 hash路由转换成history路由需要改动什么？

hash和history路由模式的区别

vue路由hash与history区别

vue路由模式hash和history

vue3路由模式hash和history的区别

hash 和 history 路由模式 监听

路由的hash和history模式的区别

vue中hash路由和history路由的区别

nginx 将hash路由变为history路由

router:前端路由history与hash模式的简单实现

深入理解Vue-router源码：Hash路由与History路由实现详解

vue路由hash和history区别

最新推荐

Vue下路由History模式打包后页面空白的解决方法

详解Vue路由History mode模式中页面无法渲染的原因及解决

详解如何去除vue项目中的#——History模式

vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法

pandas-1.3.5-cp37-cp37m-macosx_10_9_x86_64.zip

Aspose资源包：转PDF无水印学习工具

管理建模和仿真的文件

【R语言高性能计算秘诀】：代码优化，提升分析效率的专家级方法

在构建视频会议系统时，如何通过H.323协议实现音视频流的高效传输，并确保通信的稳定性？

Go语言控制台输入输出操作教程

hash 和 history 路由模式监听