前端路由模式：Hash 路由和 History 路由的使用原理及区别

什么是 hash 路由和 history 路由

Hash 模式：使用URL中的hash(#)来模拟路由，即把路由信息存储在URL的hash中。例如http://example.com/#/home。

History 模式：使用浏览器的History API来管理路由，可以在不重新加载页面的情况下修改URL。这种模式通过使用HTML5的History API将路由信息存储在浏览器的历史记录中，从而实现前端路由。在历史模式下，URL中不再有hash，例如http://example.com/home。

Hash 路由和 History 路由是如何监听路由变化的

1. Hash 路由
   通过监听 hashchange 事件来实现路由的切换，不需要服务器配置支持。

   	window.addEventListener('hashchange'，, () => {
   		console.log('触发 hash 路由变化')
   	})
   

2. History路由

   • 对于 history.go、history.back、history.forward 等操作使用 popstate 事件: window.onpopstate

     	window.addEventListener('popstate'，, () => {
     		console.log('监听到 popstate 路由变化')
     	})
     

   • 对于 pushState、replaceState 等操作需要通过函数重写的方式进行劫持

     	const rawPushState = window.history.pushState
     	window.history.pushState = (...args) => {
     		rawPushState.apply(window.history, args)
     		console.log('监听到 pushState 变化')
     	}
     	
     	const rawReplaceState = window.history.replaceState
     	window.history.replaceState = (...args) => {
     		rawReplaceState.apply(window.history, args)
     		console.log('监听到 replaceState 变化')
     	}
     

   • 注意：使用历史模式时，需要服务器配置来支持URL的重写，将路由重定向到index.html文件中，以防止直接访问路由时出现404错误。例如，可以在 Nginx 服务器上，可以在服务器配置文件中添加以下规则：

     	location / {
     	  try_files $uri $uri/ /index.html;
     	}
     

Hash 路由及 History 路由各自的优缺点

1. history路由
   • 优点：
     • 用户体验好，可以保留浏览器的前进后退功能。
     • 可以清晰地看到网站的结构，对搜索引擎优化（SEO）更加友好。
     • 不需要依赖于特定的服务器配置。
   • 缺点：
     • 存在兼容性问题，在浏览器不支持 history.pushState API时不能使用。
     • 需要服务器端配置来支持单页面应用（SPA）的路由。
2. hash路由
   • 优点：
     • 兼容性好，支持旧浏览器，即使它们不支持 history.pushState API。
     • 不需要服务器端任何配置更改即可使用。
   • 缺点：
     • 不能保留浏览器的前进后退功能，因为它是在hash值变化时进行页面的重新加载。
     • URL中会带有#，对于用户来说看起来不那么优雅。
     • 对于搜索引擎优化（SEO）不是很友好，因为它会看作是不同页面的不同部分。
3. 实际开发中如何选择路由模式
   取决于你的应用需求和目标用户群体。如果你的应用需要良好的用户体验和SEO优化，推荐使用history路由。如果你的应用需要兼容老旧浏览器或者是一个简单的单页面应用，可以选择hash路由。

注：这两种模式都用于单页面应用程序（SPA）中，客户端浏览器根据不同的URL渲染不同的视图页面，更新视图但不重新请求页面，是前端路由原理的核心。