在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可以使用。