hash和history路由的区别

**Hash 和 History 路由的区别**

在前端开发中，路由是指浏览器地址栏中的 URL 的变化，而不是页面内容的改变。有两种常见的路由实现方式：Hash 路由和 History 路由。

### Hash 路由Hash 路由使用 URL 中的 `#` 符号来表示当前页面的状态。例如，URL 为 `/home#/user`,其中 `#` 后面的部分是当前页面的状态。

**优点**

1. **简单易用**: Hash 路由不需要服务器端支持，只要在客户端实现即可。
2. **兼容性好**: 支持所有浏览器和版本。

**缺点**

1. **安全性问题**: URL 中的 `#` 符号容易被恶意利用，导致安全漏洞。
2. **SEO 不友好**: 搜索引擎无法正确解析 Hash 路由中的 URL。

### History 路由History 路由使用 HTML5 的 `pushState()` 和 `replaceState()` 方法来改变浏览器的历史记录。例如，URL 为 `/home/user`,其中没有 `#` 符号。

**优点**

1. **安全性高**: 历史记录中的 URL 不会被恶意利用。
2. **SEO 友好**: 搜索引擎可以正确解析 History 路由中的 URL。

**缺点**

1. **复杂度高**: 需要服务器端支持，才能正确解析历史记录中的 URL。
2. **兼容性问题**: 不支持 IE9以下版本的浏览器。

### 实现 Hash 和 History 路由#### 使用 JavaScript 来实现 Hash 和 History 路由

javascript// hash.jsclass HashRouter {
 constructor() {
 this.history = window.location.hash;
 }

 go(url) {
 window.location.hash = url;
 }
}

export default HashRouter;

// history.jsclass HistoryRouter {
 constructor() {
 this.history = window.history;
 }

 go(url) {
 if (window.history.pushState) {
 this.history.pushState(null, null, url);
 } else {
 window.location.hash = url;
 }
 }
}

export default HistoryRouter;

#### 使用 Vue.js 来实现 Hash 和 History 路由

javascript// hash.vue<template>
 <div>
 <button @click="go('/home')">Home</button>
 <button @click="go('/user')">User</button>
 </div>
</template>

<script>
export default {
 methods: {
 go(url) {
 this.$router.push({ hash: url });
 }
 }
}
</script>

javascript// history.vue<template>
 <div>
 <button @click="go('/home')">Home</button>
 <button @click="go('/user')">User</button>
 </div>
</template>

<script>
export default {
 methods: {
 go(url) {
 this.$router.push({ path: url });
 }
 }
}
</script>

### 总结Hash 和 History 路由都是前端开发中常见的路由实现方式。Hash 路由使用 URL 中的 `#` 符号来表示当前页面的状态，而 History 路由使用 HTML5 的 `pushState()` 和 `replaceState()` 方法来改变浏览器的历史记录。两种路由都有其优点和缺点，选择哪一种取决于具体需求和兼容性问题。

在实际开发中，可以根据项目的需求选择合适的路由实现方式。例如，如果需要支持所有浏览器版本，可以使用 Hash 路由；如果需要支持 HTML5 的历史记录功能，可以使用 History 路由。

最后，希望本文能够帮助读者理解 Hash 和 History 路由的区别，并在实际开发中正确地选择路由实现方式。