Vue3 中创建路由的history对象的工厂函数-- 聊聊createWebHistory 和 createWebHashHistory的区别

在Vue3中，createWebHistory和createWebHashHistory都是用于创建路由的history对象的工厂函数。它们的主要区别在于URL的格式以及对浏览器历史记录的影响。

1. createWebHistory

• 使用HTML5的history.pushState() API，URL是基于浏览器的实际URL路径的。
• 不会在URL中添加任何前缀，即URL路径看起来像普通的文件路径。
• 不会在URL中添加任何特殊符号，比如#符号。
• 需要服务器后端的支持，以防止在刷新页面时产生404错误。

下面是使用createWebHistory的实例代码：

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import App from './App.vue'
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: () => import('./components/Home.vue')},
    { path: '/about',  component: () => import('./components/About.vue') }
  ]
})

createApp(App).use(router).mount('#app')

2. createWebHashHistory

• 使用URL的hash部分来模拟完整的URL路径。
• 在URL中添加一个#符号，并将路由路径添加到#符号后面。
• 不依赖于服务器后端的配置，因此在刷新页面时不会产生404错误。
• 可能会在URL中显示一个不太美观的#符号。

下面是使用createWebHashHistory的实例代码：

// main.js
import { createApp } from 'vue'
import { createRouter, createWebHashHistory } from 'vue-router'
import App from './App.vue'

const router = createRouter({
  history: createWebHashHistory(),
  routes: [
    { path: '/', component: () => import('./components/Home.vue')},
    { path: '/about',  component: () => import('./components/About.vue') }
  ]
})

createApp(App).use(router).mount('#app')

总结：

• createWebHistory使用基于浏览器实际URL路径的URL格式，比较美观，但需要服务器后端的支持。
• createWebHashHistory使用基于URL的hash部分的URL格式，不需要服务器后端的支持，但在URL中会显示一个#符号。

选择使用哪个history对象取决于你的项目需求和后端配置。如果你的项目需要支持刷新页面，那么createWebHistory是更好的选择；如果你的项目没有服务器后端支持或者不需要支持刷新页面，那createWebHashHistory可以使用。