vue中hash和history的原理和区别

vue 中路由模式的区别：hash: 使用 url 片段管理状态，不发送 http 请求，对 seo 不友好，导航较快，允许跨域。history: 使用浏览器历史 api 管理状态，发送 http 请求，对 seo 友好，更新浏览器历史记录，限制跨域。

Vue 中 hash 和 history 的原理和区别

在 Vue.js 单页面应用 (SPA) 中，使用路由来管理应用程序中的页面导航和状态。有两种主要路由模式：hash 和 history。

原理

Hash:

• 使用 URL 片段（#）来管理导航状态。
• 不会向服务器发送实际的 HTTP 请求，而是通过 JavaScript 监听 URL 更改。

History:

• 使用浏览器历史 API 来管理导航状态。
• 会向服务器发送实际的 HTTP 请求，更改浏览器的地址栏。

区别

1. URL 外观

• Hash: URL 包含一个 hash (#) 符号，后跟导航状态。例如: https://example.com/#/home
• History: URL 类似于传统网站的 URL，不包含 hash。例如: https://example.com/home

2. 浏览器历史记录

• Hash: 不会更改浏览器的历史记录。
• History: 会更新浏览器的历史记录，就像在普通网站上导航一样。

3. 对 SEO 的影响

• Hash: 由于 hash 不包含在 HTTP 请求中，因此对 SEO 不友好，因为搜索引擎无法抓取 hash 部分。
• History: 由于 URL 更改是通过 HTTP 请求实现的，因此对 SEO 友好，搜索引擎可以抓取并索引页面。

4. 性能

• Hash: 导航更快，因为不需要向服务器发送 HTTP 请求。
• History: 导航速度较慢，因为需要向服务器发送 HTTP 请求。

5. 跨域限制

• Hash: 允许跨域导航，因为它使用 JavaScript 监听 URL 更改。
• History: 不允许跨域导航，因为会发送 HTTP 请求，浏览器会阻止跨域请求。

用例

• Hash: 常用于不支持 HTML5 历史 API 的旧浏览器或需要跨域导航的应用程序中。
• History: 常用于需要对 SEO 友好、维护浏览器历史记录或更新地址栏的应用程序中。

以上就是vue中hash和history的原理和区别的详细内容，更多请关注叮当号网其它相关文章！