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

结论先行:

首先,hash 模式是通过监听 URL 的 Hash 变化来控制路由;而 History 模式是通过修改浏览器历史记录来进行路由控制;

那它们的区别呢,首先是 URL 格式的不同。hash 模式在 URL 中会使用号来表示路由路径;而在 history模式下,URL 中不再包含哈希标记(#),而是直接使用真实的 URL 路径。

其次在兼容性方面,hash 模式对浏览器的兼容性更好,因为 history 模式要求浏览器支持 HTML5 History API

在搜索引擎优化方面,hash 模式下是不利于SEO 的,因为搜索引擎不会解析 # 后面的内容;

最后,就是 history 模式它是需要后端服务器配置支持的,以防止直接访问路由时出现 404 错误。而 hash 模式不要后端配置支持;

综上所述,hash 模式 适用于简单的前端开发,不需要特殊后端配置,对兼容性要求较高,但在 SEO 方面存在一定的问题。

而 history 模式 则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目,但需要服务器端进行相应的配置。

具体解析: 

Vue Router 支持两种路由模式,分别是 Hash 模式和 History 模式。默认使用的是 hash 模式。

1、设置路由模式

在创建 Vue Router 实例时,通过设置 mode 属性来设置路由模式:

const router = new VueRouter({
  mode: 'history',
  routes: [
    // 路由配置
  ]
});

2、两种模式的区别 

在开发中,history 模式和 hash 模式的区别主要涉及 URL 的格式、兼容性、SEO 和后端配置等方面。

① URL 格式

hash 模式:

在 URL 中使用符号来表示路由路径,例如:http://example.com/#/home  

缺点:不够美观,并且可能会导致 SEO 问题

history 模式:

URL 中不再需要 # 符号,使用常规的路径格式,例如:http://example.com/home

优点:URL 更加美观。符合传统 URL 格式;

② 兼容性

hash 模式: 

对浏览器的兼容性更好,可以在不支持 HTML5 History API 的浏览器中正常运行。

history 模式: 

需要浏览器支持 HTML5 History API,较低版本的浏览器可能不支持。

③  SEO(搜索引擎优化)

hash 模式: 

搜索引擎不会解析# 后面的内容,因此在 SEO 方面存在一定的问题。

history 模式: 

URL 更加友好,搜索引擎能够直接解析路由路径,有利于 SEO。

④  后端配置

hash 模式: 

不需要任何后端配置,因为路由路径是在客户端进行解析的。

history 模式: 

需要后端服务器配置支持,以防止直接访问路由时出现 404 错误。

3、总结 

综上所述,hash 模式 适用于简单的前端开发,不需要特殊后端配置,对兼容性要求较高,但在 SEO 方面存在一定的问题。

而 history 模式 则适用于需要更友好的 URL 格式和更好的 SEO 支持的项目,但需要服务器端进行相应的配置。

选择哪种模式取决于具体的项目需求和技术要求。

4、区别补充

hash 模式和 history 模式都属于浏览器自身的特性, Vue-Router 只是利用了这两个特性 (通过调用浏览器提供的接口)来实现前端路由。 

① hash 模式

使用 window.location.hash 来读取路由路径

hash 虽然出现在 URL 中, 但不会被包括在 HTTP 请求中,对后端完全没有影响,因此改变 hash 不会重新加载页面。

② history 模式

使用 HTML5 新特性: History API,通过修改浏览器的历史记录来实现路由导航

​​​​​​​这种模式充分利用 history.pushState() 来完成 URL 跳转而无须重新加载页面。

利用了 HTML5 新增的 history.pushState() 和 history.replaceState() 方法对浏览器历史记录栈进行修改,以及 popState 事件的监听到状态变更​​​​​​​。

在当前已有的 back、forward、go 的基础之上, 它们提供了对历史记录进行修改的功能。只是当它们执行修改时,虽然改变了当前的 URL, 但浏览器不会立即向后端发送请求。 

需要注意的是,在使用 history 模式时,如果用户直接访问一个路由路径,服务器需要配置以返回正确的页面,否则会出现 404 错误。

history 模式下,前端的 URL 必须和实际向后端发起请求的 URL一致;如 http://example.com/person/id 如果后端缺少对 /person/id 的路由处理,将返回 404 错误。

要在服务端增加一个覆盖所有情况的候选资源:如果 URL 匹配不到任何静态资源, 则应该返回同一个 index.html 页面,这个页面就是你 app 依赖的页面。只需在后端(Apache 或 Nginx)进行简单的路由配置, 同时搭配前端路由的 404 页面支持。

5、实现原理

hash 模式: 

在 Hash 模式下,路由信息会被保存在 URL 的 Hash 部分,通过监听 Hash 变化来进行路由控制;

history 模式: 

在 History 模式下,路由信息会被保存在浏览器的 History API 中,通过修改浏览器历史记录来进行路由控制;

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值