位置: 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)(百慕大玛丽号)

  • 房地产企业税率为5销售水泥怎么算
  • 采购人员的费用
  • 航天金税交499
  • 财务报告分析主要内容
  • 医院业务支出包括哪些内容科目
  • 项目经费支出都包括什么
  • 外商投资企业母公司派到境内职员回国后
  • 社保企业二次扣款怎么扣
  • 进口代理公司怎么收费
  • 苗木免税发票可以认证增值税吗
  • 个人定期存款利率怎么算
  • 一般纳税人注销公司流程2023
  • 拿到农产品0税率的发票可以抵扣吗
  • 俱乐部会员有什么用
  • 废品损失科目月末
  • 小规模季度划分
  • 装修费用如何做分录
  • 进项税在即征即退吗
  • 小规模财报是按年报吗
  • 进口增值税发票可以抵扣吗
  • 低值易耗品与固定资产有相同的特征,表现在哪里?
  • 实收资本不变说明了什么
  • 1697510490
  • 行政单位上年支出退回
  • 外账的结转成本是什么
  • Yii2使用驼峰命名的形式访问控制器的示例代码
  • macos新版本
  • 公司收到的应收股利需要分配利润吗
  • windows 修改host
  • Windows11如何使用管理员账号登录
  • 拍卖公司收入计入什么分录
  • 个人所得税扣缴申报啥意思
  • php的数组函数
  • 财政返还土地奖金的规定
  • yolov3图像识别
  • 企业向个人租房子需要缴纳什么税
  • 营改增建筑业范围
  • tar压缩解压缩命令
  • 微信小程序下拉菜单怎么做
  • 前端手撕代码
  • 前端权限控制实战
  • 一文速学-XGBoost模型算法原理以及实现+Python项目实战
  • 管理费用税金怎么算
  • 原材料用于在建工程增值税如何处理
  • html前端开发教程
  • 前年度多交附加税怎么交
  • 账上没有实收资本
  • php 更新
  • 房地产企业买地
  • 员工持股平台合伙企业如何设立
  • 土地增值税预缴计税依据
  • 固定资产清理包括什么会计科目
  • php图片格式转换
  • 税务多措并举
  • 差额增值税发票和全额增值税发票
  • 合并报表存货抵消
  • 自产自用的产品增值税怎么算
  • 印花税计提依据业务发生时间还是开票时间?
  • 开餐饮店需要什么条件才能开
  • 建筑企业开具增值税发票
  • 什么是备查账
  • mysql5.5改密码
  • windows共享文件夹端口号
  • 魔方win10
  • 借助竹子赞美人物气节的诗句有哪些
  • windowsxp怎么改windows7
  • windows xp系
  • win7 设置
  • win10系统的电脑有哪些
  • css教程推荐
  • 详解16型人格
  • 批处理生成excel
  • 使用的英文
  • js数组洗牌
  • js鼠标滚动页面触发事件
  • 简述jquery的优势
  • python event.pos
  • jquery iframe src
  • 一般纳税人按季申报的行业
  • 供热用地规划指标
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设