前端路由：Hash vs History，一篇讲明白！

大家好，今天我们来聊聊前端路由的那些事儿！不管是面试还是实际开发，路由都是前端必知必会的知识点。掌握了它，你就能轻松实现单页面应用（SPA）的无刷新跳转体验！

一、前端路由原理

1、SPA是什么？

SPA（Single Page Application）就是单页面应用。传统的网站每点一个链接就重新加载整个页面，而SPA就像它的名字一样------只有一个页面！所有内容变化都在这个页面内完成，体验丝滑流畅，就像在使用手机APP一样。

想想你常用的Gmail、知乎或者掘金，它们都是SPA的典型例子。页面切换时只有局部内容更新，不需要重新加载整个页面，速度快体验好。

2、什么时候需要路由？

即使只有一个页面，我们也需要模拟多页面的效果，让用户能够：

使用浏览器的前进后退按钮
收藏某个页面状态并分享给他人
通过URL直接访问特定内容

这就是前端路由的用武之地！它让SPA拥有了"虚拟"的多页面能力。

二、Hash模式

1、定义

Hash模式利用URL中井号(#) 后面的部分来实现路由。比如：

bash 复制代码

https://example.com/#/home
https://example.com/#/about

2、网页url组成部分

（1）了解几个url的属性

scss 复制代码

// 假设当前URL是：https://example.com:8080/path/index.html?id=100#/home

console.log(location.href)    // 整个URL
console.log(location.protocol) // https:
console.log(location.hostname) // example.com
console.log(location.host)     // example.com:8080
console.log(location.port)     // 8080
console.log(location.pathname) // /path/index.html
console.log(location.search)   // ?id=100
console.log(location.hash)     // #/home

（2）演示

Hash值的变化不会导致浏览器向服务器发送请求，这就是它实现前端路由的基础！

3、hash的特点

兼容性极好：支持到IE6
实现简单：几行代码就能搞定
不会触发页面刷新：完美满足SPA需求
不会发送到服务器：服务器收不到hash部分

监听hash变化很简单：

javascript 复制代码

// 监听hash变化
window.addEventListener('hashchange', function() {
  console.log('Hash变了！新hash:', location.hash);
  // 根据hash值渲染不同内容
});

// 或者直接赋值改变hash
location.hash = '/user';

三、History模式

1、定义

History模式使用HTML5提供的History API来实现路由，URL看起来更"正常"：

arduino 复制代码

https://example.com/home
https://example.com/about

2、与hash的区别

最大区别是：History模式的URL没有#号，看起来更简洁专业！

3、history的API

History API提供了强大功能：

javascript 复制代码

// 前进到新页面，增加历史记录
history.pushState({id: 1}, '', '/home');

// 替换当前历史记录
history.replaceState({id: 2}, '', '/about');

// 监听popstate事件（注意：pushState和replaceState不会触发此事件）
window.addEventListener('popstate', function(event) {
  console.log('位置变化了', event.state);
});

4、history的特点

URL美观：没有#号，看起来像传统URL
功能强大：可以存储复杂状态对象
需要服务器支持：这是关键点！

5、存在问题

刷新404问题：因为History模式的URL看起来像真实路径，如果直接访问或刷新页面，浏览器会向服务器请求这个路径的资源。如果服务器没有配置返回首页，就会返回404错误。

解决方案：需要在服务器配置，所有路径都返回index.html：

bash 复制代码

# Nginx配置示例
location / {
  try_files $uri $uri/ /index.html;
}

6、两者选择

怎么选？看这里：

特性	Hash模式	History模式
URL美观度	差（有#）	优（无#）
兼容性	极好（IE6+）	较好（IE10+）
服务器配置	不需要特殊配置	需要配置
SEO	较差	较好（需配合SSR）

选择建议：

如果需要兼容老浏览器 → 选Hash
如果追求URL美观且能配置服务器 → 选History
如果是内部系统、对URL不敏感 → 选Hash
如果是面向公众的网站 → 选History