created vue（Vue3 中 createWebHistory 和 createWebHashHistory 的区别）

Vue3 是目前比较流行的前端框架之一
  
  
  
  
  
  
  
  
 ，它提供了很多方便的 API 来帮助我们开发高效                  、可维护的应用程序
  
  
  
  
  
  
  
  
 。在使用 Vue Router 进行路由管理时  
  
  
  
  
  
  
  
  ，我们可以使用 createWebHistory 和 createWebHashHistory 来创建不同类型的路由模式  
  
  
  
  
  
  
  
  。本文将介绍这两种模式的区别和如何选择合适的模式
 


 


 


 


 


 


 


 


 

。

createWebHistory

createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式
 


 


 


 


 


 


 


 


 

，它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法来实现路由跳转
 
 
 
 
 
 
 
 
。这种模式可以使得 URL 更加直观
 
 
 
 
 
 
 
 
，而且不会在 URL 中添加任何特殊字符   
   
   
   
   
   
   
   
   。例如   
   
   
   
   
   
   
   
   ，我们可以将路由设置为 /home
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
、/about 等等
 

 

 

 

 

 

 

 

 
。

使用 createWebHistory 可以通过以下方式创建一个路由：

import { createRouter, createWebHistory } from vue-router import Home from @/views/Home.vue import About from @/views/About.vue const router = createRouter({ history: createWebHistory(), routes: [ { path: /home, name: home, component: Home }, { path: /about, name: about, component: About } ] })

在使用 createWebHistory 时
 

 

 

 

 

 

 

 

 
，需要注意以下几点：

在使用 createWebHistory 时

 

 

 

 

 

 

 

 

，需要在服务器端进行一些配置

 

 

 

 

 

 

 

 

。因为使用了 history API                  ，如果直接在浏览器中刷新或直接访问某个路由
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 ，服务器将无法识别该路由

















，并返回 404 错误                  。因此                          ，需要在服务器端配置 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 ，将所有的路由请求都返回首页


























，再由前端代码进行路由的匹配和处理
 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 。

createWebHistory 只支持 HTML5 标准浏览器                 ，对于老版本的浏览器无法使用

















。

在开发环境下  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 ，我们需要将 webpack 的 historyApiFallback 属性设置为 true

















，以便在开发环境下正常使用路由                          。

createWebHashHistory

createWebHashHistory 是 Vue Router 提供的一种基于浏览器 URL 的 hash 路由模式
  
  
  
  
  
  
  
  
 ，它将路由添加到 URL 中的 hash 中  
  
  
  
  
  
  
  
  ，例如：/#/home
















、/#/about 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 。这种模式可以避免服务器配置的问题
 


 


 


 


 


 


 


 


 

，而且支持所有浏览器


























。但是
 
 
 
 
 
 
 
 
，由于 URL 中添加了 hash   
   
   
   
   
   
   
   
   ，因此在搜索引擎的 SEO 优化中存在一些问题                 。

使用 createWebHashHistory 可以通过以下方式创建一个路由：

import { createRouter, createWebHashHistory } from vue-router import Home from @/views/Home.vue import About from @/views/About.vue const router = createRouter({ history: createWebHashHistory(), routes: [ { path: /home, name: home, component: Home },