一、History 路由模式

1.1、概念

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

1.2、优缺点

优点：

1. URL 地址更直观：让用户在前进和后退时看到正确的 URL 地址。

2. SEO 优化：搜索引擎对 HTML5 history API 更友好，对单页应用进行搜索引擎优化时容易实现。

3. 体验更好：用户在前进后退时不用再次加载页面，更流畅的页面体验。

缺点：

1. 浏览器兼容性：HTML5 history API 不能在低版本浏览器中使用，需要考虑兼容性问题。

2. 维护代码：使用 History 路由模式实现路由功能需要更多的代码维护，代码实现难度更高。

3. 需配置服务器：需要在服务器配置路由。
4. 耗资源：每访问一个页面都需要向服务器发送请求，进行路由匹配，生成 html 文件，然后再响应给浏览器，消耗了服务器大量资源。
5. 404 错误：直接访问嵌套路由时，会报 404 错误，即页面找不到问题。

1.3、实现示例

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

// 定义路由配置
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');

二、Hash 路由模式

2.1、概念

Hash 路由模式是使用 URL 中的 hash 值实现前端路由，通过window.location.hash改变 URL 中的 Hash 值，监听 window.onhashchange事件，控制页面的状态，从而实现不同页面间的跳转，例如 #/home、#/about。Hash 路由模式适用于不支持 HTML5 history API 的低版本浏览器。

2.2、优缺点

优点：

1. 兼容性好：Hash 路由模式适用于不支持 HTML5 history API 的低版本浏览器。

2. 简单实现：Hash 路由模式比 History 路由模式实现简单。

3. 服务器配置：不需要服务器任何配置。

缺点：

1. URL 不直观：用户看到的 URL 地址不够直观，可读性差。

2. SEO 受影响：对于单页应用来说，使用 Hash 路由模式实现路由功能时，SEO 优化会受到影响。

3. 与锚点同时使用时，存在刷新页面时失效问题：如果页面刷新后 URL 中的 Hash 值不存在，那么页面会重新加载，这时页面的状态就会丢失。

2.3、实现示例

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

// 定义路由配置
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 形式的路由方案。

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