首页 > 其他分享 >vue-router:history和hash的区别

vue-router:history和hash的区别

时间:2022-10-11 14:00:54浏览次数:83  
标签:vue hash 模式 刷新 router 浏览器 地址栏 history

前言:写这个随笔是因为后端部署时,第一次进入页面无问题,刷新后页面空白,寻找原因发现有两个解决方案;1、后端nginx做保底映射,映射到正确的路径;2、前端更改为hash模式也可解决

1.原理不同。

2.表现不同。

3.history模式特点

总结

单页应用是在移动互联时代诞生的,它的目标是不刷新浏览器,而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标,我们要用到前端路由技术,具体来说有两种方式来实现:hash模式和history模式。

不同之处有三点。

1.原理不同。
hash模式的实现原理是通过监听hashChange事件来实现的,前端js把当前hash地址对应的组件渲染到浏览器中。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录,并更换地址栏地址信息,但是页面不会刷新,需要手动调用地址变化之后的处理函数,并在处理函数内部决定跳转逻辑;监听popstate事件是为了响应浏览器的前进后退功能。

2.表现不同。
hash模式会在地址栏中有#号,而history模式没有;同时由于history模式的实现原理用到H5的新特性,所以它对浏览器的兼容性有要求(IE >= 10)。

3.history模式特点
history模式开发的SPA项目,需要服务器端做额外的配置,否则会出现刷新白屏(链接分享失效)。原因是页面刷新时,浏览器会向服务器真的发出对这个地址的请求,而这个文件资源又不存在,所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。

总结
单页应用是在移动互联时代诞生的,它的目标是不刷新整体页面,通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标,我们要用到前端路由技术,具体来说有两种方式来实现:hash模式和history模式。hash模式是通过监听hashChange事件来实现的,history模式是通过pushState方法+popstate事件来实现的。
————————————————
版权声明:本文为CSDN博主「前端小刘~」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/weixin_62930485/article/details/123491635

标签:vue,hash,模式,刷新,router,浏览器,地址栏,history
From: https://www.cnblogs.com/MrZhous/p/16778981.html

相关文章

  • 如何运行别人的Vue项目
    1、将项目里的“node_modules”文件夹删除,一般“node_modules”文件夹太大,一般不会打包上传到svn、git上的,所以没有这个文件夹就不用删。2、删除package-lock.json。它是......
  • vue项目启动cannot get,并且还有报错信息..
    项目中需要下载vue-table-with表单组件,需要第三方依赖库下载。结构npm下载失败,直接先下载yarn--再下载vue-table-with组件----结构整个项目崩溃了。一直报错...卸载了ya......
  • Vue3的模板语法
    1.插值语法1.1基本使用点击查看代码<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible"content="IE=edge">......
  • 使用CDN方式引用Vue3和ElementPlus
    使用CDN方式引用Vue3和ElementPlus​​引用Vue​​​​代码​​​​注意事项​​​​Elementplus​​​​代码​​​​注意事项​​升级了之前做的vue2+ElementUI的项目,......
  • vue打包部署时页面布局混乱
    vue打包部署样式混乱问题分析:样式混乱最根本的原因就是样式冲突。样式冲突是如何产生的?由于一个页面由多个.vue文件组成,后每个.vue文件都有style,所以就导致冲突了......
  • Vue export default {} 函数基本结构
    <script>importConfirmfrom'../sub/Confirm';exportdefault{name:"First",//components组件注册components:{Con......
  • vue 版本查看
    如何查看vue版本号?方法1、全局查看vue版本号npminfovue方法2、局部(当前项目)查vue版本号npmlistvueversion方法3、此外还可以通过package.json查看使用的vue版......
  • VUE自学日志00-Vue3安装
    目录#1.发布版本说明#2.VueDevtools#3.CDN#4.下载并自托管#5.npm#6.命令行工具(CLI)#7.Vite#8.对不同构建版本的解释#8.1.使用CDN或没有构建工具#vue(.runtime).global......
  • HashSet源码学习
    HashSet1、总体架构2、方法源码可以看到其实内部就是一个hashMap其他方法add()方法   ......
  • 前端Vue2-Day47
    事件处理:使用v-on:事件名或@事件名绑定事件。1.事件的回调需要配置在methods对象内,最终在vm上。2.methods中的配置函数,this指向为组件实例对象或vm。不使用箭头函数,......