hash 和history的区别

文章目录

- 前言
- 区别
- hash模式
- - 原理
  - 优点
  - 缺点
- history 模式
- - 原理
  - 优点
  - 缺点

前言

在前端中，路由是一个常见的需求，在单页面应用（SPA）中。为了实现无刷线的页面切换，通过会使用浏览器的URL来管理应用的状态。两种常见的路由模式hash模式和 history模式
hash模式和 history模式都属于浏览器自身的特性，

区别

● history和 hash两种路由模式都是利用浏览器的两种特性实现的前端路由
○ history是利用浏览历史记录的API实现的
○ hash是监听location对象hash值变化来实现
● history的URL中没有 #号
● 相同的URL，history 会触发添加到浏览器历史记录栈中，hash不会触发

hash模式

例如：http://www.asdf.com/#/hello

原理

● Hash是URL中#号分割，后面的部分也称为锚点（哈希值）
● 当URL的哈希值发生变化时，浏览器不会重新加载页面，而是会滚动到页面中对应的ID的元素位置。
● 利用这一特性，在前端框架中可以监听哈希值的变化，并根据不同的哈希值来切换页面内容，从而实现无刷新的页面导航

优点

● 兼容性好：几乎所有的浏览器都支持哈希值的变化
● 简单易用：实现起来相对简单，不需要服务器端的支持

缺点

● URL不够美观：URL中带有#号，可能会影响用户体验
● SEO不友好：搜素引擎可能无法正常索引带有哈希值的URL

history 模式

原理

● history API是HTML5引入的一组API，包括pushState,replaceState,popstate事件
● pushState方法可以在不重新加载页面的情况下改变当前页面的URL。
● replaceState方法可以替换当前历史记录的条目，而不是添加新的条目。
● popstate事件会在浏览器的前进/后退按钮被点击时触发

优点

● URL美观：URL中没有#号，更加符合现代网站的设计风格
● SEO友好：搜素引擎可以更好的索引这些URL，有利于SEO

缺点

● 兼容性较差：在一些老的浏览器中可能会存在问题。
● 需要服务端配合：在使用History模式时，服务器需要配置正确的路由规则，以确保所有路径都能正常返回入口文件,否则请求会返回404
○ 解决办法：后端配置正确的路由规则，
■ node为例
■

// 下载npm包解决
npm install --save connect-history-api-fallback
`````js
// node 中使用
const express = require('express')
var history = require('connect-history-api-fallback')
const app = express()app.use(history())