位置: IT常识 - 正文

Vue3 中 createWebHistory 和 createWebHashHistory 的区别

编辑:rootadmin
Vue3 中 createWebHistory 和 createWebHashHistory 的区别

推荐整理分享Vue3 中 createWebHistory 和 createWebHashHistory 的区别,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

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

createWebHistory

createWebHistory 是 Vue Router 提供的一种基于浏览器 history API 的路由模式,它使用了 HTML5 中的 history.pushState 和 history.replaceState 方法来实现路由跳转。这种模式可以使得 URL 更加直观,而且不会在 URL 中添加任何特殊字符。例如,我们可以将路由设置为 /home、/about 等等。

Vue3 中 createWebHistory 和 createWebHashHistory 的区别

使用 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 },
本文链接地址:https://www.jiuchutong.com/zhishi/293757.html 转载请保留说明!

上一篇:MySQL+Navicat安装配置教程(超级详细、保姆级)(navicat的安装)

下一篇:百慕大马利海滩鸟瞰图 (© Paul Zizka/plainpicture)(百慕大玛丽号)

  • 不含税买货合法吗
  • 我国增值税征收范围
  • 咨询合同按什么交印花税
  • 无票收入在增值税申报表的哪里填
  • 劳务服务有什么
  • 利息按月计提分录
  • 坏账准备的账务处理4步
  • 资源税的销售额包括
  • 新企业所得税法规定的企业所得税基本税率
  • 实收资本认缴制期限
  • 收到电费发票做账摘要怎么写
  • 冲以前年度暂估
  • 企业购买原材料,货款未支付
  • 企业必须要现金流入吗
  • 变电站是否缴纳房产税
  • 个人经营所得核定征收超过多少要交税
  • 公司股权转1元转让还涉及哪些税务风险?
  • 所得税汇算清缴调整项目
  • 税务局代开专用发票要缴纳城建税吗?
  • 购买面粉的税率是多少
  • 绿化企业所得税税率是多少
  • 政府机关开票是普票还是专票
  • 怎样预交增值税
  • 长期应付款账面价值和账面余额
  • 计提缴纳社保的会计分录
  • 异地预缴企业所得税会计分录
  • 离职补偿怎么做工资
  • 企业注销时未分配利润怎么处理
  • 劳务派遣公司增值税税率
  • 升级华为鸿蒙系统怎么样
  • 研发费用资本化可以加计扣除吗
  • linux怎么操作
  • 在win7中如何设置屏幕保护程序
  • php脚本主要用于的三个领域
  • php设计思路
  • 账务处理程序有什么
  • 应付票据抵付应付账款
  • php精彩编程200例
  • 固定资产减值准备可以税前扣除吗
  • php100 jquery教程
  • php内核剖析
  • 网页设置怎么在css中设置
  • 面试宝典下载
  • 制造费用体现在哪些方面
  • 车辆过完户保险还能下浮吗
  • 个税申报的本期收入是应发工资吗
  • 教育咨询公司能开培训费发票吗
  • 自来水适用3%税率还是9%税率
  • 影响年度损益的金额怎么算
  • 企业固定资产账户核算的固定资产其所有权均属于本企业
  • 固定资产清理如何做账
  • 销售免税农产品的会计分录
  • 经营性租赁资产
  • 筹建期间的利息费用计入什么科目
  • 公众号注册验证退款
  • 成本大于收入汇算清缴怎么处理
  • 变更印鉴单位公函格式
  • 厂家核销费用直接扣除吗
  • 固定资产卡片项目的数据类型包括
  • 员工报销没有发票可以从公户转账吗
  • 商品盘点库存的方法
  • mysql连接时间长怎么优化
  • 32位操作系统不能玩cf
  • ubuntu16.04输入法
  • centos中如何安装软件
  • ubuntu 04 10
  • 升级win10时蓝屏
  • win7任务栏显示预览窗口
  • 电脑自带win8是装win7还是win10
  • react 技巧
  • bash脚本语法
  • debug命令及其基本操作
  • perl hex
  • Node.js中的construct构造函数
  • mac打开多个窗口
  • javascript基础笔记
  • 使用jQuery Ajax 请求webservice来实现更简练的Ajax
  • python获取数据代码
  • javascript与java
  • 什么车属于应征消费税的汽车
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设