跳跃选择：Vue-router 中的 Hash 模式和 History 模式有何区别？

2023-09-08 21:00:57

Vue.js 路由模式：Hash 模式与 History 模式

在 Vue.js 单页应用 (SPA) 的开发中，选择合适的路由模式至关重要。Vue.js 提供了两种主要的路由模式：Hash 模式和 History 模式。本文将深入探讨这两种模式，比较它们的优缺点，并帮助你做出最适合你应用程序的决策。

路由模式的工作原理

Hash 模式

Hash 模式利用 URL 中的哈希部分（#）来表示路由。例如，如果你的路由是 /home，使用 Hash 模式，URL 将变为 /home#/。

每当路由改变时，哈希部分也会发生改变。这使得 Hash 模式非常适合书签和链接，因为你可以轻松地通过复制和粘贴 URL 来链接到应用程序中的特定页面。

// Hash 模式示例

import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ],
  mode: 'hash',
});

History 模式

History 模式使用浏览器的历史记录 API 来表示路由。使用 History 模式时，URL 中不包含哈希部分，而是直接显示路由。例如，如果你的路由是 /home，使用 History 模式，URL 将直接显示为 /home。

每当路由改变时，浏览器的历史记录也会发生改变。这使得 History 模式非常适合具有复杂导航的应用程序，因为用户可以通过使用浏览器的后退和前进按钮轻松地浏览应用程序。

// History 模式示例

import VueRouter from 'vue-router';
import Home from './components/Home.vue';
import About from './components/About.vue';

const router = new VueRouter({
  routes: [
    {
      path: '/',
      component: Home,
    },
    {
      path: '/about',
      component: About,
    },
  ],
  mode: 'history',
});