Vue3 中 createWebHistory 和 createWebHashHistory 的区别

在Vue 3中，createWebHistory和createWebHashHistory是两个用于创建Vue Router的history实例的函数。它们的主要区别在于它们创建的路由模式不同：

• createWebHistory（无哈希模式）：

  它创建的历史模式是利用了HTML5 History API（pushState和replaceState方法），没有使用URL的哈希部分。这意味着URL看起来像是正常的网址，没有#符号。例如：http://example.com/user/id。

• createWebHashHistory（哈希模式）：

  它使用URL的哈希部分（即#符号）来模拟一个完整的URL，通常用于兼容老的浏览器或者一些不支持HTML5 History API的浏览器。例如：http://example.com/#/user/id。

实例代码：

import { createRouter, createWebHistory, createWebHashHistory } from 'vue-router';
 
// 使用createWebHistory（无哈希模式）
const routerHistoryMode = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes: [
    // ...定义路由
  ],
});
 
// 使用createWebHashHistory（哈希模式）
const routerHashMode = createRouter({
  history: createWebHashHistory(process.env.BASE_URL),
  routes: [
    // ...定义路由
  ],
});

根据你的需求选择使用哪种模式。如果你想要更“正常”的URL，不希望有#符号，并且确信你的用户浏览器支持HTML5 History API，那么使用createWebHistory。如果你需要兼容老旧的浏览器或者在一些特定的场景下，使用createWebHashHistory。