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
    },

补充：Vue使用createWebHistory 页面刷新变成白页 解决

Vue使用createWebHistory 页面刷新变成白页 解决办法

hash模式时，项目的根目录是不变的，而在history模式时，以/开头的嵌套路径会被当做根据经。

所以更改文件webpack.prod.config.js(publicPath从’./‘更改为’/’)即可解决此问题

总结

到此这篇关于Vue3中createWebHistory和createWebHashHistory区别详析的文章就介绍到这了,更多相关createWebHistory和createWebHashHistory区别内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

最新评论