hash模式与history模式的区别(详细版)

目录

前端路由的由来

hash模式与history模式的区别：

history模式的配置：

服务器端配置：无论是使用Vue Router还是React Router，都需要服务器端配置以支持history模式。服务器需要能够将所有路由请求重定向到前端入口文件（通常是index.html），然后由前端路由处理。以下是几种常见服务器的配置示例：

前端路由配置：使用路由库（如Vue Router或React Router）配置history模式。

Vue Router 示例：

React Router 示例：

hash模式与history API 

Hash模式的API：

 History模式的API（HTML5 History API）：

完整的SPA页面导航示例：

结语：如果有不对的，请大家评论区补充

---

前端路由的由来

前端路由的概念起源于单页面应用（SPA, Single Page Application）的发展。SPA通过动态内容更新而不是重新加载整个页面来提高用户体验。前端路由允许开发者定义应用中的不同视图，以及如何在用户与应用交互时导航这些视图。

前端路由的hash和history两种模式是实现单页面应用（SPA）中页面导航的两种不同方法。以下是它们之间的主要区别，以及如何配置history模式的详细说明。

hash模式与history模式的区别：

1. URL结构（表面区别）:

   • hash模式: URL包含一个#号，如http://example.com/#/home。#后面的部分表示不同的视图或页面状态。
   • history模式: URL看起来像传统的URL，如http://example.com/home，没有#号。

2. 工作原理:

   • hash模式: 利用URL的hash部分来模拟页面路由。当hash变化时，页面不会重新加载，前端路由库会监听这个变化并更新视图。
   • history模式: 利用HTML5的History API，特别是pushState和replaceState方法，来操作浏览器的历史记录栈，实现无刷新的页面导航。

3. 浏览器历史记录:

   • hash模式: 不影响浏览器的历史记录，不会产生新的历史记录条目。
   • history模式: 可以添加新的历史记录条目，支持浏览器的前进和后退操作。

4. 服务器配置:

   • hash模式: 通常不需要服务器端配置，因为只有hash部分改变，页面资源的请求路径不变。
   • history模式: 需要服务器端配置以正确响应前端路由的URL请求，确保所有路由请求都返回index.html文件，然后由前端路由处理。

5. SEO和用户体验:

   • hash模式: 由于URL包含#，可能对SEO不友好，但实现简单。
   • history模式: 提供更优雅的URL，有利于SEO，但需要更多的服务器端和前端配置。

6. 兼容性:

   • hash模式: 兼容性好，几乎所有浏览器都支持。
   • history模式: 需要HTML5支持，现代浏览器通常支持，但在一些旧浏览器中可能存在问题。

history模式的配置：

1. 服务器端配置：无论是使用Vue Router还是React Router，都需要服务器端配置以支持history模式。服务器需要能够将所有路由请求重定向到前端入口文件（通常是index.html），然后由前端路由处理。以下是几种常见服务器的配置示例：

   • Apache: 使用mod_rewrite模块。

   • Nginx: 使用try_files指令。

   • Node.js/Express: 使用connect-history-api-fallback中间件。

     • Apache:

       <IfModule mod_rewrite.c>
           RewriteEngine On
           RewriteBase /
           RewriteRule ^index\.html$ - [L]
           RewriteCond %{REQUEST_FILENAME} !-f
           RewriteCond %{REQUEST_FILENAME} !-d
           RewriteRule . /index.html [L]
       </IfModule>

     • Nginx:

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

     • Node.js/Express:

       const express = require('express');
       const history = require('connect-history-api-fallback');
       
       const app = express();
       
       // ... 其他中间件和路由配置 ...
       
       app.use(history({
         verbose: true
       }));
       
       // 静态文件服务
       app.use(express.static(path.join(__dirname, 'public')));
       
       // ... 其他配置 ...

2. 前端路由配置：使用路由库（如Vue Router或React Router）配置history模式。

   • Vue Router 示例：

     • 安装Vue Router： 如果还未安装Vue Router，可以通过npm或yarn进行安装：

       npm install vue-router

     • 创建Vue Router实例： 在Vue应用中创建一个路由实例，并配置路由规则：

       // router/index.js
       import Vue from 'vue';
       import Router from 'vue-router';
       import Home from '../components/Home.vue';
       import About from '../components/About.vue';
       // ...引入其他页面组件
       
       Vue.use(Router);
       
       export default new Router({
         mode: 'history', // 指定使用history模式
         routes: [
           { path: '/', component: Home },
           { path: '/about', component: About },
           // ...定义其他路由
         ],
       });

     • 在Vue实例中使用Router： 在主Vue实例中，确保引入并使用上面创建的Router实例：

       // main.js
       import Vue from 'vue';
       import App from './App.vue';
       import router from './router';
       
       new Vue({
         router, // 使用上面创建的router实例
         render: h => h(App),
       }).$mount('#app');

   • React Router 示例：

     • 安装React Router： 如果还未安装React Router，可以通过npm或yarn进行安装：

       npm install react-router-dom

     • 使用BrowserRouter组件： 在React应用中，使用BrowserRouter代替HashRouter来启用history模式：

       // App.js 或 index.js
       import React from 'react';
       import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
       import HomePage from './HomePage';
       import AboutPage from './AboutPage';
       // ...引入其他页面组件
       
       function App() {
         return (
           <Router> // 使用BrowserRouter包裹应用
             <Switch>
               <Route exact path="/" component={HomePage} />
               <Route path="/about" component={AboutPage} />
               // ...定义其他路由
             </Switch>
           </Router>
         );
       }
       
       export default App;

hash模式与history API 

hash和history是两种不同的浏览器API，它们用于处理URL和浏览器历史记录。以下是它们各自的API列表：

Hash模式的API：

1. window.location.hash：

   • 用于获取或设置URL中的hash部分（即#后面的部分）。
   • 当更改这个属性时，会更新浏览器地址栏中的hash值，但不会引起页面的重新加载。
   • 例如：window.location.hash = 'section2';。

2. hashchange事件：

   • 当hash值发生变化时，会触发这个事件。
   • 可以用来执行页面内容的更新操作。
   • 例如:

     window.addEventListener('hashchange', function() {
         // 更新页面内容
     });

 History模式的API（HTML5 History API）：

1. history.pushState(state, title, url)：

   • 在浏览器的历史记录堆栈中添加一个新的记录。
   • state：一个与历史记录条目相关联的JavaScript对象。
   • title（可选）：新记录的标题，目前大多数浏览器忽略此参数。
   • url：新记录的URL，应该与当前页面同源。

   // 添加一个新的历史记录条目
   history.pushState({page: 1}, '', '?page=1');

2. history.replaceState(state, title, url)：

   • 替换当前历史记录堆栈中的记录。
   • 参数同pushState。

   // 替换当前历史记录条目
   history.replaceState({page: 2}, '', '?page=2');

3. history.popState事件：

   • 当调用popState事件时，会触发此事件。
   • 事件对象包含一个state属性，其值为相关联的状态对象。

   // 添加一个新的历史记录条目
   history.pushState({page: 1}, '', '?page=1');

4. history.back()：

   • 相当于点击浏览器的后退按钮，加载历史记录中的上一个条目。

   // 后退到历史记录的上一个条目
   history.back();

5. history.forward()：

   • 相当于点击浏览器的前进按钮，加载历史记录中的下一个条目。

   // 前进到历史记录的下一个条目
   history.forward();

6. history.go(delta)：

   • 通过相对于当前页面的历史记录位置delta来加载页面。
   • 正值表示向前跳转，负值表示向后跳转。

   // 前进一页
   history.go(1);
   // 后退两页
   history.go(-2);

7. history.length：

   • 返回会话历史记录的长度，即用户可以回退的页面数量。

8. history.state：

   • 包含当前历史记录条目的状态对象。

9. 监听 popstate 事件:
   • 作用: 当历史记录条目发生变化时（如用户点击后退或前进按钮），会触发 popstate 事件。
   • 用法: 使用 addEventListener 监听 popstate 事件，并根据 event.state 恢复页面状态。

   // 监听 popstate 事件
   window.addEventListener('popstate', function(event) {
     if (event.state) {
       // 使用 event.state 中的数据来更新页面内容
       console.log('页面状态:', event.state);
     }
   });

这些API允许开发者在不重新加载页面的情况下，对浏览器的URL和历史记录进行更复杂的操作。hash模式简单易用，但history模式提供了更丰富的功能，尤其是在构建单页面应用（SPA）时。 

完整的SPA页面导航示例：

假设我们有一个单页面应用（SPA），使用 History API 来实现页面导航：

<!DOCTYPE html>
<html>
<head>
  <title>SPA示例</title>
</head>
<body>

  <button onclick="loadPage('home')">首页</button>
  <button onclick="loadPage('about')">关于我们</button>

  <div id="content">
    <!-- 页面内容将在这里加载 -->
  </div>

  <script>
    function loadPage(page) {
      const url = `pages/${page}.html`;
      // 可以在这里添加 Ajax 请求以加载页面内容
      // 这里只是示例，我们直接使用 pushState 更改 URL
      history.pushState({page: page}, '', url);
      // 假设页面内容加载到 content div 中
      document.getElementById('content').textContent = `内容加载中... ${page}`;
    }

    // 监听 popstate 事件以响应页面后退和前进
    window.addEventListener('popstate', function(event) {
      if (event.state) {
        loadPage(event.state.page);
      }
    });
  </script>

</body>
</html>

在这个示例中，我们定义了两个按钮来模拟页面导航。点击按钮时，loadPage 函数会被调用，并使用 history.pushState 来更改URL而不重新加载页面。同时，我们监听 popstate 事件来响应用户的后退和前进操作，根据历史记录的状态来重新加载页面内容。

结语：如果有不对的，请大家评论区补充