History 和 Hash 路由模式

一、History 路由模式

1.1、原理

History 路由模式使用 HTML5 的 History API (window.history.pushState()和window.history.replaceState()) 实现前端路由，可以让页面在前进后退时保持当前状态，让 URL 地址看起来像是普通网站一样。

1.2、优缺点

优点：

URL 地址更直观：让用户在前进和后退时看到正确的 URL 地址。
SEO 优化：搜索引擎对 HTML5 history API 更友好，对单页应用进行搜索引擎优化时容易实现。
体验更好：用户在前进后退时不用再次加载页面，更流畅的页面体验。

缺点：

浏览器兼容性：HTML5 history API 不能在低版本浏览器中使用，需要考虑兼容性问题。
维护代码：使用 History 路由模式实现路由功能需要更多的代码维护，代码实现难度更高。
耗资源：每访问一个页面都需要向服务器发送请求（即 URL 变更后导致页面的刷新，除前进后退），进行路由匹配，生成 html 文件，然后再响应给浏览器，消耗了服务器大量资源，对服务器造成较大的压力。
404 错误：直接访问嵌套路由时，会报 404 错误，即页面找不到的问题。
需配置服务器：这里以 nginx 配置为例：

server {
  listen 80;
  location / {
    # 用于配合 History 使用
    try_files $uri $uri/ /index.html;
  }
}

server {
    listen       80;
    server_name  localhost;
    location /sub/ {
      # 这里是打包文件 dist 内文件的存放路径
      alias   /srv/www/project/;
      index index.html index.htm;
      try_files $uri $uri/ /sub/index.html;
    }
}

1.3、实现示例

原生代码实现示例：

使用 History 路由模式的简单代码示例：

const routes = {
  home: {
    path: '/',
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>Home Page</h1>';
    }
  },
  about: {
    path: '/about',
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>About Page</h1>';
    }
  },
  contact: {
    path: '/contact',
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>Contact Page</h1>';
    }
  }
};

window.addEventListener('popstate', () => {
  const path = window.location.pathname;
  for (const key in routes) {
    if (routes[key].path === path) {
      routes[key].render();
    }
  }
});

const nav = document.querySelector('#nav');
for (const key in routes) {
  const a = document.createElement('a');
  a.href = routes[key].path;
  a.innerText = key[0].toUpperCase() + key.slice(1);
  a.addEventListener('click', e => {
    e.preventDefault();
    history.pushState({}, '', e.target.href);
    routes[key].render();
  });
  nav.appendChild(a);
}

在上面的代码中，我们定义了一个路由表 routes，其中的键值对表示 URL Pathname 与对应的路由信息。通过监听 popstate 事件，我们可以在浏览器前进、后退等操作时动态获取当前的 URL Pathname，并从路由表中获取对应的路由信息，最后执行该路由的 render 方法即可。此外，我们还在 <nav> 元素中动态生成了导航链接，并为每个链接绑定了点击事件，通过使用 history.pushState 方法改变 URL，并在相应的时候触发渲染。

Vue 代码实现示例：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

在上面的代码中，使用了 router-link 组件来实现路由导航，并使用 router-view 组件来展示当前路由对应的组件。

在路由的配置中，我们已经定义了两个路由：/ 和 /about，对应的组件分别是 HomePage 和 AboutPage。

在页面中，使用 router-link 组件的 to 属性指定要跳转的路由地址，当用户点击该链接时，路由会根据地址自动切换到对应的路由，并在 router-view 组件中展示对应的组件。

History 路由模式代码示例：

// 定义路由配置
const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

// 创建路由实例
const router = new VueRouter({
  mode: 'history',
  routes
});

// 创建 Vue 实例并挂载路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

以上代码是基于 Vue.js 实现的路由示例，可以看到，在路由实例的创建过程中，只需要将mode参数设置为'history'即可实现 History 路由模式。

二、Hash 路由模式

2.1、原理

Hash 路由模式是使用 URL 中的 hash 值实现前端路由，通过window.location.hash改变 URL 中的 Hash 值，监听 window.onhashchange事件，控制页面的状态，从而实现不同页面间的跳转，例如 #/home、#/about。

2.2、优缺点

优点：

兼容性好：Hash 路由模式适用于不支持 HTML5 history API 的低版本浏览器。
简单实现：Hash 路由模式比 History 路由模式实现简单，不需要服务器任何配置。
页面刷新：页面跳转时无需刷新页面，页面初次加载完成后，对服务器资源的消耗较少，从而对服务器造成的压力也较小。

缺点：

URL 不直观：用户看到的 URL 地址不够直观，可读性差。
SEO 受影响：对于单页应用来说，使用 Hash 路由模式实现路由功能时，SEO 优化会受到影响。
与锚点同时使用时，存在刷新页面时失效问题：如果页面刷新后 URL 中的 Hash 值不存在，那么页面会重新加载，这时页面的状态就会丢失。
白屏问题：页面初次加载时，需要等待大量静态资源文件的加载，因此用户等待时间稍长，就会出现白屏问题。

2.3、实现示例

原生代码实现：

使用 Hash 路由模式的简单代码示例：

const routes = {
  home: {
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>Home Page</h1>';
    }
  },
  about: {
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>About Page</h1>';
    }
  },
  contact: {
    render: () => {
      const content = document.querySelector('#content');
      content.innerHTML = '<h1>Contact Page</h1>';
    }
  }
};

window.addEventListener('hashchange', () => {
  const hash = window.location.hash.slice(1) || 'home';
  const route = routes[hash];
  if (route) {
    route.render();
  }
});

const nav = document.querySelector('#nav');
for (const key in routes) {
  const a = document.createElement('a');
  a.href = `#${key}`;
  a.innerText = key[0].toUpperCase() + key.slice(1);
  nav.appendChild(a);
}

在上面的代码中，我们定义了一个路由表 routes，其中的键值对表示 URL Hash 与对应的路由信息。通过监听 hashchange 事件，我们可以在 URL Hash 发生变化时，动态获取当前的 Hash 值，并从路由表中获取对应的路由信息，最后执行该路由的 render 方法即可。此外，我们还在 <nav> 元素中动态生成了导航链接。

Vue 代码实现：

<template>
  <div>
    <router-link to="/">Home</router-link>
    <router-link to="/about">About</router-link>
    <router-view />
  </div>
</template>

Hash 路由模式代码示例：

// 定义路由配置
const routes = [
  {
    path: '/',
    component: HomePage
  },
  {
    path: '/about',
    component: AboutPage
  }
];

// 创建路由实例
const router = new VueRouter({
  mode: 'hash',
  routes
});

// 创建 Vue 实例并挂载路由
new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

将 mode 参数设置为'hash' 即可实现 Hash 路由模式。

三、锚点

锚点（Anchor）是 HTML 中的一种特殊的标签，可以用于实现页面内的链接跳转。

锚点代码示例：

<!-- 在页面中创建目标位置 -->
<h2 id="target">Target Section</h2>

<!-- 创建链接 -->
<a href="#target">Jump to Target Section</a>

在上面的代码中，我们通过 id 属性创建了一个锚点目标，然后通过链接标签 a 创建了一个链接，链接的目标是页面中的 #target 锚点。当用户点击该链接时，页面会跳转到目标位置（即锚点）。

Hash 路由模式和锚点都是用于实现页面内的链接跳转，但是 Hash 路由模式更加高级，可以实现单页面应用的效果，而锚点只是一个简单的链接跳转。

四、总结

总的来说，选择使用 History 路由模式还是 Hash 路由模式取决于具体的需求，如果需要使用 SEO 优化或者追求更好的用户体验，使用 History 路由模式是更好的选择。但如果不需要 SEO 优化，或者兼容性要求更高，使用 Hash 路由模式可以更简单实现路由功能。

此外，现在也有一些路由方案结合了 History 路由模式和 Hash 路由模式的优点，可以同时解决它们的缺点，比如使用 Hashbang 形式的路由方案。

最后，不管选择哪种路由模式，开发者都需要注意兼容性问题，并结合项目的需求进行合理的选择。

posted @ 2023-02-10 17:05 飞仔FeiZai 阅读(330) 评论(0) 编辑收藏举报

刷新页面返回顶部

飞仔FeiZai

�不积跬步，无以至千里� �不积小流，无以成江海�

History 和 Hash 路由模式

�不积跬步，无以至千里�
�不积小流，无以成江海�