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

  • 小规模纳税人转一般纳税人
  • 没有固定金额的合同叫什么合同
  • 房产契税什么时候交的小知识
  • 所得税汇算申报完之后可以修改吗
  • 收客户刷卡手续费时客户不愿意缴费,如何处理
  • 现金流量表现金指的什么
  • 如何确定固定资产的原始价值
  • 去年滞纳金没入营业外今天怎么账务处理
  • 信用卡到账手续费
  • 出口退税转内销会计分录
  • 合伙企业投资收益
  • 核定征收的收入总额包括营业外收入吗
  • 企业为职工购买的商业保险属于职工薪酬吗
  • 税控盘专票认证登录密码正确还是登录不上去
  • 注销了出口退税怎么办
  • 原材料供销合同和电子汇划收款回单金额不一样
  • 支付本月租金计入什么科目
  • 美金报关出口能不能收跨境人民币
  • 实收资本印花税怎么申报税目
  • 厂房转让企业所得税计算方法
  • 未结清全额是逾期吗
  • 小规模纳税人工程服务的增值税率
  • 新税法下广告费计税依据
  • 年薪制有什么好处
  • 税款滞纳金如何免除
  • 工资薪金总额是指月还是全年
  • 退票费报销凭证可以在机子上打印吗
  • 专项应付款形成资产怎么处理账?
  • 电子商务出来干嘛
  • 资源税计税依据含不含增值税
  • b4纸张尺寸
  • windows10如何更改时间
  • 出租厂房折旧可以税前扣除
  • iphone8plus完美越狱
  • PHP:mb_strrchr()的用法_mbstring函数
  • 购买不动产会计分录
  • 企业购进房产怎么抵扣
  • fsck是什么文件
  • 在laravel中,界面文件应该放在以下哪个路径下
  • 销售免税农产品进项税可以抵扣吗
  • 为什么会产生应收账款
  • 正爬上唐娜·诺克沙滩的灰海豹,英格兰北林肯郡 (© Frederic Desmette/Minden Pictures)
  • PHP:imagefilledellipse()的用法_GD库图像处理函数
  • php关联数组和索引数组的区别
  • 增值税发票月度统计
  • php gettext
  • php反序列化漏洞原理
  • 机器学习中的数据预处理方法与步骤
  • 存货毁损计入什么科目
  • 员工办理健康证需要什么材料
  • 国债 企业
  • 税务局季度报表利润表
  • 企业的存货清查包括
  • 增值税发票内容填写不全应如何进行处理?
  • 企业其他应付款减少说明什么
  • 购买银行承兑汇票贴现诈骗
  • 营改增企业是什么意思
  • 机物料消耗计入什么费用
  • 企业跨年度支出怎么计算
  • 营业成本年末怎么结转
  • 出口退税的计算与流程
  • 预包装食品加工及销售营业执照图片
  • 会计往来账如何记账
  • 商品流通企业会计做账流程
  • sql语句优化之用是什么
  • sqlserver怎么用
  • Ubuntu下mysql与mysql workbench安装教程
  • ubuntu20.04升级
  • 如何在windows中添加字体
  • windows任务管理器打不开
  • win7防火墙打不开错误代码6801
  • win8隐藏任务栏怎么恢复
  • win7系统无法创建分区也无法定位
  • 两个linux系统之间如何传文件
  • CSS锦囊
  • 志愿者开展活动后存在的问题
  • 注册资金实缴证明怎么出
  • 小规模纳税人企业所得税怎么征收
  • 信息报送条例
  • 海宁到许村公交车路线
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设