在 Vue 3 的路由管理中，我们可以选择使用 createWebHistory 或 createWebHashHistory 来创建路由实例。这两者都用于管理 SPA（单页面应用）的路由，但它们的实现机制和应用场景却有所不同。
什么是 createWebHistory 和 createWebHashHistory
-
createWebHistory：这是一种基于 HTML5 History API 的路由模式，它利用浏览器的history.pushState()和history.replaceState()等方法实现无刷新导航。使用这种模式下，URL 显示的是完整的路径，例如/users/1。 -
createWebHashHistory：这个模式则是基于 URL 的 hash 部分实现的，即在 URL 中采用#符号，后面的路径部分就不再向服务器发送请求，而是由前端 JavaScript 处理。例如，URL 格式为/#/users/1。
主要区别
- URL 结构：
createWebHistory形式：/users/1-
createWebHashHistory形式：/#/users/1 -
浏览器支持：
createWebHistory依赖于 HTML5 的 History API，较新的浏览器都支持，但在较老的浏览器中可能不兼容。-
createWebHashHistory则在任何支持基本 URL 的浏览器中都可以工作，因此相对而言兼容性更好。 -
刷新与服务器配置：
- 使用
createWebHistory时，由于 URL 是“干净的”，需要服务器进行相应配置，一般需要将所有的请求都重定向到入口 HTML 文件，以便 Vue Router 处理路由。 -
使用
createWebHashHistory则不需要特殊的服务器配置，因为即使在刷新页面时，hash 部分不会被发送到服务器。 -
SEO（搜索引擎优化）：
createWebHistory更友好于 SEO，因为 URL 是标准的，而不是包含 hash 的。createWebHashHistory由于使用了 hash，会在爬虫抓取上有一定的限制，不利于 SEO。
代码示例
下面是一个简单的示例，展示如何在 Vue 3 中使用这两种路由模式。
使用 createWebHistory
// main.js
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHistory(),
routes,
});
const app = createApp(App);
app.use(router);
app.mount('#app');
使用 createWebHashHistory
// main.js
import { createApp } from 'vue';
import { createRouter, createWebHashHistory } from 'vue-router';
import App from './App.vue';
import Home from './views/Home.vue';
import About from './views/About.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/about', component: About },
];
const router = createRouter({
history: createWebHashHistory(),
routes,
});
const app = createApp(App);
app.use(router);
app.mount('#app');
总结
在选择使用 createWebHistory 还是 createWebHashHistory 时，开发者需要考虑以下几个因素：应用的浏览器兼容性要求、SEO 需求、服务器配置能力等。如果你的应用主要面对现代浏览器，并且希望获得更好的用户体验和 SEO，则推荐使用 createWebHistory。如果你的应用需要更好的兼容性或者不想处理服务器配置，则可以选择 createWebHashHistory。
