vue前端 router路由hash和history模式区别

vue-router路由有两种方式,hash模式和history模式,接下来浅谈一下两者区别

|---------|-------------------------|------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| 模式 | 通俗解释 | 兼容 | 原理 |
| hash | url尾巴后的#号及后面的字符都是hash模式 | 兼容IE8及以上 | 于 hash 值变化不会导致浏览器向服务器发出请求,而且 hash 改变会触发 hashchange 事件(hashchange只能改变 # 后面的url片段);虽然hash路径出现在URL中,但是不会出现在HTTP请求中,对后端完全没有影响,因此改变hash值不会重新加载页面,基本都是使用 hash 来实现前端路由的。 ------------------------------------------------ 版权声明:本文为CSDN博主「爱笑的小宇宙」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。 原文链接:https://blog.csdn.net/wangningjing87/article/details/100982120/ |
| history | history没有带# | 兼容到 IE10以上 | history模式URL就要和后端进行一致,所以要改为history也需要后端的配合,否则会报错 |
| 区别 | 1、hash模式每次刷新页面时是直接更改"#"后的东西,地址不变。 2、history每次刷新会重新像后端请求整个网址,也就是重新请求服务器。如果后端没有及时响应,就会报错404!。history的好处是可以进行修改历史记录,并且不会立刻像后端发起请求。 3、不过如果对于项目没有硬性标准要求,建议直接使用hash模式开发。 |||

相关推荐
老华带你飞几秒前
电影购票|基于java+ vue电影购票系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot
老华带你飞2 分钟前
宠物管理|基于java+ vue宠物管理系统(源码+数据库+文档)
java·开发语言·前端·数据库·vue.js·spring boot·宠物
Irene19912 分钟前
Vue 3 中的内置指令:v-memo
vue.js·v-memo
释怀不想释怀2 小时前
Ajax,vue生命周期(自动加载页面发出请求)Axios
前端·javascript·ajax
一点晖光2 小时前
ios底部按钮被挡住
前端·ios·微信小程序
VX:Fegn08952 小时前
计算机毕业设计|基于springboot + vue智慧医药系统(源码+数据库+文档)
java·数据库·vue.js·spring boot·后端·课程设计
Light608 小时前
CSS逻辑革命:原生if()函数如何重塑我们的样式编写思维
前端·css·响应式设计·组件化开发·css if函数·声明式ui·现代css
蜡笔小嘟9 小时前
宝塔安装dify,更新最新版本--代码版
前端·ai编程·dify
Irene19919 小时前
Vue:useSlots 和 useAttrs 深度解析
vue.js·useslots·useattrs
ModyQyW9 小时前
HBuilderX 4.87 无法正常读取 macOS 环境配置的解决方案
前端·uni-app