Vue3 中 createWebHistory 和 createWebHashHistory 的区别

createWebHistory

  • 创建方式: 使用 createWebHistory 函数来创建基于 HTML5 History API 的路由。
javascript 复制代码
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
    }
  ]
})  
  • 使用方式: 在大多数现代浏览器中,使用标准的 URL 格式,没有 # 符号。
  • 在浏览器中的显示方式: 显示为常规的 URL,例如https://mp.csdn.net/mp_blog/manage/article

缺点:

服务器配置: 需要服务器配置来处理所有路由请求,以便正确地返回 index.html 文件,以便在客户端渲染应用程序。

刷新时问题: 刷新页面时,如果服务器不正确配置,会导致 404 错误,因为服务器无法找到对应的路由。

  • 优化方式:
    服务器配置: 需要在服务器上进行配置,以确保在路由请求时正确地返回 index.html 文件。例如,在使用 Nginx 时,可以使用 try_files 指令。
    历史模式兼容性: 如果考虑兼容性,可以使用 createWebHashHistory 替代,不需要特殊的服务器配置。

createWebHashHistory

  • 创建方式: 使用 createWebHashHistory 函数来创建基于 URL 哈希的路由。
javascript 复制代码
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
    },
    {
      path: '/about',
      name: 'about',
      component: About
    }
  ]
})
  • 使用方式: 在 URL 中使用 # 符号来表示路由。
  • 在浏览器中的显示方式: URL 中会包含 # 符号,例如https://mp.csdn.net/mp_blog/manage/#/article
    缺点:
    丑陋的 URL: URL 包含 # 符号,看起来较为丑陋。
    SEO 问题: 对于搜索引擎优化不友好,因为搜索引擎不会解析 # 符号后的内容。
  • 优化方式:
    美化 URL: 可以通过其他技术手段(如路由别名)来美化 URL,减少 # 符号的影响。
    服务端渲染: 如果考虑 SEO,可以考虑使用服务端渲染来解决 SEO 问题,但这会增加应用程序的复杂性。
    (使用 Thymeleaf 模板引擎配合Spring Boot 的优化渲染)
相关推荐
YiHanXii1 天前
Axios 相关的面试题
前端·http·vue·react
申朝先生2 天前
vueRouter的hash模式跟history的区别
vue
小阳生煎2 天前
Vue3当中el-tree树形控件使用
vue
Num_9_G4 天前
使用vue cli 5.0 在vscode中运行vue命令报错
vue
小二·5 天前
Node.js 下载安装及环境配置教程、卸载删除环境配置超详细步骤(附图文讲解!) 从零基础入门到精通,看完这一篇就够了
前端框架·node.js·vue
HBR666_6 天前
菜单(路由)权限&按钮权限&路由进度条
前端·vue
等什么君!6 天前
ElementPlus 快速入门
vue
xixixin_6 天前
【uniapp】各端获取路由路径的方法
前端·javascript·uni-app·vue
suuijbd7 天前
Java实习生面试题(2025.3.23 be)
spring·面试·vue·mybatis