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

  • 微信“搜一搜,如何进行关键词布局抢占流量(微信搜一搜广告投放)

    微信“搜一搜,如何进行关键词布局抢占流量(微信搜一搜广告投放)

  • 开店技巧:如何发掘宝贝的优点(开店的技巧和方法)

    开店技巧:如何发掘宝贝的优点(开店的技巧和方法)

  • 谷歌浏览器兼容模式怎么设置(谷歌浏览器兼容性设置在哪里找)

    谷歌浏览器兼容模式怎么设置(谷歌浏览器兼容性设置在哪里找)

  • 苹果手机显示e是怎么回事(苹果手机显示耳机模式怎么关闭)

    苹果手机显示e是怎么回事(苹果手机显示耳机模式怎么关闭)

  • 打印机不可用(惠普打印机显示该打印机不可用)

    打印机不可用(惠普打印机显示该打印机不可用)

  • 电脑屏幕怎么录制(电脑屏幕怎么录制视频教程)

    电脑屏幕怎么录制(电脑屏幕怎么录制视频教程)

  • 哪种防火墙类型的安全级别最高(有哪些类型的防火墙)

    哪种防火墙类型的安全级别最高(有哪些类型的防火墙)

  • 辽通卡微信可以充值吗(辽通卡怎么插)

    辽通卡微信可以充值吗(辽通卡怎么插)

  • 华为nova7耳机怎么连接手机(华为nova7耳机怎么戴)

    华为nova7耳机怎么连接手机(华为nova7耳机怎么戴)

  • 输入计算公式时必须首先输入什么(在excel单元格内输入计算公式时)

    输入计算公式时必须首先输入什么(在excel单元格内输入计算公式时)

  • 华为手环app叫什么(华为手环app叫什么名称)

    华为手环app叫什么(华为手环app叫什么名称)

  • 酷我音乐和酷狗音乐区别(酷我音乐和酷狗音乐哪个好一点)

    酷我音乐和酷狗音乐区别(酷我音乐和酷狗音乐哪个好一点)

  • 华为手机下滑通知栏不见了(华为手机下滑通知栏有声音)

    华为手机下滑通知栏不见了(华为手机下滑通知栏有声音)

  • 腾讯会议超时了怎么办(腾讯会议超时了需要重建吗)

    腾讯会议超时了怎么办(腾讯会议超时了需要重建吗)

  • 淘宝的等级怎么划分的(淘宝的等级怎么升级)

    淘宝的等级怎么划分的(淘宝的等级怎么升级)

  • 三星s8美版和国行区别(三星s8美版和国行怎么区分)

    三星s8美版和国行区别(三星s8美版和国行怎么区分)

  • word封面文字竖排居中(word封面文字竖排居中间距)

    word封面文字竖排居中(word封面文字竖排居中间距)

  • 微信自助解封人脸识别失败怎么办(微信自助解封人工客服)

    微信自助解封人脸识别失败怎么办(微信自助解封人工客服)

  • 华为matex采用什么系统

    华为matex采用什么系统

  • wps表格里的字怎么删除(wps表格里的字怎么调整行间距)

    wps表格里的字怎么删除(wps表格里的字怎么调整行间距)

  • 一加7有红外功能吗(一加7有红外线)

    一加7有红外功能吗(一加7有红外线)

  • 华为麦芒9上市时间(华为麦芒十年臻爱版)

    华为麦芒9上市时间(华为麦芒十年臻爱版)

  • linux查找文件(linux查找文件夹)

    linux查找文件(linux查找文件夹)

  • iphone如何补电(怎么给iphone补电)

    iphone如何补电(怎么给iphone补电)

  • 软盘驱动器是什么设备(软盘驱动器是什么存储器)

    软盘驱动器是什么设备(软盘驱动器是什么存储器)

  • 浅谈2016年智能路由器销售状况有望持续增长(智能化的发展现状与趋势)

    浅谈2016年智能路由器销售状况有望持续增长(智能化的发展现状与趋势)

  • hpdrv.exe是什么进程 有什么作用 hpdrv进程查询(.hpp是什么文件)

    hpdrv.exe是什么进程 有什么作用 hpdrv进程查询(.hpp是什么文件)

  • 小规模纳税人零申报逾期未申报
  • 一般纳税人的计税方式是什么
  • 车船税税金及附加计入管理费用嘛
  • 销售返利可以计入销售费用吗
  • 进口环节应纳消费税的计税依据为
  • 个税申报人员报送成功怎么删除
  • 小规模纳税人企业购进货物和接受应税劳务时
  • 销售成本结转属于收入吗
  • 土地使用税怎么征收标准
  • 汇票退回会计分录怎么写
  • 建安业一般纳税人是清包工是什么意思
  • 公司人事怎么办公积金提取流程?
  • 退税收入需要缴纳所得税吗
  • 小规模纳税人未建账处罚
  • 支付职工补贴计入什么科目
  • 国外企业提供国际运输服务税率
  • 应收账款少给货款怎么做分录?
  • 路由器怎么重置网络
  • 小规模防伪税控服务费280元
  • 完工转出产成品成本计算
  • vbs win10
  • 如何修复win7系统引导
  • mysqli php
  • mac safari使用技巧
  • 权益法投资收益在年末确认
  • 虚拟机不能互相访问
  • 使用vue搭建项目
  • laravel elementui
  • 事业单位委托业务费的现金流量
  • 项目辅材计入什么科目
  • 个人所得税部分缴纳
  • 前端解决浏览器跨域问题
  • thinkphp yii
  • thinkphp框架结构
  • 个体工商户的酒店增值税率是多少
  • 签劳动合同员工突然离职怎么办
  • 2021年发票认证期限为多少天
  • 母子公司之间借款要交税吗
  • 期末存货材料成本差异
  • 固定资产的认定标准2022
  • 企业购买的汽车可以抵税吗
  • 捆绑销售如何做会计处理合适?
  • 新会计准则印花税规定
  • 留抵进项税太多怎么办
  • 增值税农产品免税
  • 总资产利润率一般为多少
  • 收到保险赔款是什么意思
  • 工程维修款是从工程款中扣除吗
  • 投标保证金支付给谁
  • 已入库的原材料会计分录
  • 小微企业注册流程及注意事项
  • 应纳税工资是应发还是实发
  • 年末结余资金
  • 进出口货物报关单
  • 个体户银行开户所需资料
  • 运输费增值税专用发票
  • 边际成本是什么意思大白话
  • 旧账整理方案
  • 加工企业三种商业模式
  • mysql表字段设置默认值
  • mysql事件调用存储过程
  • mysql 5.7.28安装
  • xp系统安装惠普1010教程
  • debian和ubuntu命令一样吗
  • xp系统如何查看系统配置
  • xp系统怎么没有无线网络连接
  • win7小技巧
  • win7安装内存4g
  • java如何自定义函数
  • vue只适合做单页项目吗
  • jquery.cookie.js用法实例详解
  • python基础入门教程
  • jquery插件开发方法
  • 网页加载多个js文件冲突
  • jquery监听span内容的变化
  • javascript程序设计教程
  • flexable.js
  • 网上税务营业厅
  • 西安医疗保险官网
  • 小企业会计准则会计科目表
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设