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 的优化渲染)
相关推荐
伍哥的传说1 天前
CSS+JavaScript 禁用浏览器复制功能的几种方法
前端·javascript·css·vue.js·vue·css3·禁用浏览器复制
aiguangyuan2 天前
前端开发性能优化概要
系统架构·vue·react·前端开发
不老刘2 天前
Claude Code 基于 VUE + KonvaJS 实现海报生成器(附源码)
vue·claude·konvajs
Tipriest_2 天前
ubuntu 多网络路由优先级问题
网络·ubuntu·路由·多网络
今天不要写bug3 天前
js原生实现搜索框下拉列表输入框模糊匹配高亮
javascript·vue·ecmascript
weixin_422201304 天前
uniapp自定义圆形勾选框和全选框
javascript·uni-app·vue·自定义·checkbox
敲可耐的咕魂君4 天前
【建议AI收录本信息】electron进行主进程和渲染进程异步通信
electron·vue
前端程序猿-秦祥4 天前
uniapp打开导航软件并定位到目标位置的实现
前端·uni-app·vue·导航
sunbyte5 天前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | ImageCarousel(图片轮播组件)
前端·javascript·vue.js·vue·ecmascript
百锦再5 天前
Vue使用element plus组件的细节问题之时间格式
前端·javascript·vue.js·vue·element·date·elementsplus