前端路由的两种模式：hashhistory

最新推荐文章于 2023-05-04 10:34:42 发布
最新推荐文章于 2023-05-04 10:34:42 发布
阅读量898 收藏
点赞数
分类专栏： 前端基础 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41838435/article/details/123720807
版权

前端路由的两种模式：hash和history

1、hash
hash模式是通过onhashchange事件，监听url的修改

优点：兼容性比较高，可以直接在项目部署上线时使用

缺点：url中带#号，不美观，并且如果移动端分享严格限制，可能会报错

在这里插入图片描述

2、history
history通过H5提供的API  history.pushState 和 history.pushState实现跳转且不刷新页面

优点：url没有#，比较美观

缺点：需要与后端搭配，配合项目的部署上线
hibiscusxin
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
前端路由原理？两种实现方式有什么区别？
LuckXinXin的博客
12-04 1003
前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的页面，并且无须刷新页面。目前前端使用的路由就只有两种实现方式 Hash 模式 History 模式 Hash 模式 www.test.com/#/ 就是 Hash URL，当 # 后面的哈希值发生变化时，可以通过 hashchange 事件来监听到 URL 的变化，从而进行跳转页面，并且无论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.com window.addEventListene.
浅谈前端路由原理hash和history
最新发布
fafafaz的博客
03-20 1169
hash 模式是一种把前端路由的路径用 # 拼接在真实 url 后面的模式在hash模式下，本质上是修改window.location.href实现的。前端路由的改变依托于#锚点，而锚点后边的值我们可以通过修改window.location.hash的值来修改，每一次hash值的变化都会导致触发hashchange这个事件，hash模式就是通过 hashchange 事件来 监听 hash 值的改变从而渲染页面对应的组件。
vue-router路由模式详解
weixin_43597801的博客
03-29 2655
通过pushstate把页面的状态保存在state对象中，当页面的url再变回这个url时，可以通过event.state取到这个state对象，从而可以对页面状态进行还原，这里的页面状态就是页面字体颜色，其实滚动条的位置，阅读进度，组件的开关的这些页面状态都可以存储到state的里面。更关键的一点是，因为hash发生变化的url都会被浏览器记录下来，从而你会发现浏览器的前进后退都可以用了，同时点击后退时，页面字体颜色也会发生变化。如果发现没有浏览器的API，路由会自动强制进入这个模式。
解决vue项目路由跳转页面不变问题
jiangjunyuan168的博客
05-11 2647
问题： 今天在开发vue移动端项目的过程中发现了一个bug，就是当按返回键的时候页面并没有发生变化，一开始还以为是没有监听到返回事件，但是通过测试之后发现返回事件监听成功了，路由也发生了变化，相应事件也触发了，就是页面视图没有跟着改变。 解决方法： 项目中路由设置的是 hash模式，所以对 hashchange 事件进行监听（hash模式下，路由的变化会触发hashchange事件） 在App.vue中给hashchange绑定事件： mounted() { // 检测浏览器路由改变页面不刷新问题
前端面试题的学习与总结
qq_57483391的博客
05-04 2449
自己刷前端面试题的个人总结。
vue hash模式下路由改变页面不刷新问题
weixin_41815063的博客
04-08 4390
//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入//js原始方法刷新，相当于按F5刷新页面，会有短暂的白屏，相当于页面的重新载入 hash模式下路由改变页面不刷新问题 在App.vue文件中添加： export default { mounted () { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange', () => { ..
vue-router 源码实现前端路由的两种方式
08-27
主要介绍了vue-router 源码实现前端路由的两种方式，主要介绍Hash 路由和History 路由，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
web-router-principle:基于 hash 和 history 两种模式，分别使用原生JSReactVue 实现简单的前端路由，总共六个实现版本以供参考
05-06
web-router-principle 本仓库用于存放文章中的示例代码。 本地运行 克隆本仓库，安装依赖： npm install 运行指令： npm run dev 运行效果图：
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
详解vue 单页应用（spa）前端路由实现原理
12-11
下面就来介绍下这两种方式具体怎么实现的 一.history 1.history基本介绍 window.history 对象包含浏览器的历史，window.history 对象在编写时可不使用 window 这个前缀。history是实现SPA前端路由是一种主流方法...
router.push不刷新（8种解决方案）
热门推荐
leveretz的博客
11-13 1万+
router.push不刷新（8种解决方案）
html5 操纵,【HTML5】操纵历史，利用HTML5 History API实现无刷新跳转
weixin_28893705的博客
06-26 113
写在前面有一次在上点点网的时候，发现登陆、注册动画效果非常华丽，但让我感到震惊的是页面竟能够实现无刷新跳转(已改版，观看此效果可以猛击此处：GitHub或阅FM)，回顾了所学的前端知识，似乎没有任何技术可以实现这一点，于是百度搜罗了一下，才发现这原来是使用HTML5中History API实现的效果，但奈何一直未曾派上用场。直到博客改版时，才将这一技术应用起来。HTML4中的History API...
前端实现路由的两种方式
yzyxzz的博客
11-09 4343
前端实现路由的方式主要有两种：hash模式和history模式、前端路由的本质为url改变页面不刷新、达到视图数据改变的结果。 1.hash模式： window对象的location属性值里的 hash属性可以拿到hash值：window.location.hash。 window对象的全局方法hashchange()可以监听到hash值得变化。 主要基于这个原理来实现hash模式的前端路由。 实例代码1： <body> <li><a href="#/home"
前端路由模式详解（hash和history）
weixin_43758377的博客
03-12 2154
前端路由模式详解（hash和history） 前端路由有两种模式：hash 模式和 history 模式，接下来分析这两种模式的实现方式和优缺点。 hash 模式 hash 模式是一种把前端路由的路径用井号 # 拼接在真实 URL 后面的模式。当井号 # 后面的路径发生变化时，浏览器并不会重新发起请求，而是会触发 hashchange 事件。 示例： 我们新建一个 hash.html 文件，内容为： <a href="#/a">A页面</a> <a href="#/b">
路由切换：监听hashchange事件实现
aozhou9334的博客
06-27 1669
感谢这两位大佬的分享： 原生js中的bind() 哈希路由实现&原理 暑期实习还是没有着落...HR们是不是都觉得，这位同学就实习两个月，东西学完了就跑了？ 呜呜呜不是啊我会好好工作的 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"&g...
vue 路由改变页面不刷新问题
Jana Jing的分享
07-22 270
在 App.vue文件添加以下代码: mounted() { // 检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange', () => { let currentPath = window.location.hash.slice(1) if (this.$route.path !== currentPath) { this.$router.
2021-1-4 vue路由浏览器返回页面没有返回的问题
weixin_43861696的博客
01-04 1303
之前差了很多资料，我目前的项目是要实现动态菜单的功能，所以我使用了路由动态加载。不知道为什么，路由就不会返回了。 浏览器url框的地址都发生了变化，但页面就是没有变化。 查找了很多方法，最后我找到了解决的方案。 解决方案，在app.vue中添加 mounted(){ //检测浏览器路由改变页面不刷新问题,hash模式的工作原理是hashchange事件 window.addEventListener('hashchange',()=>{ letcu...
彻底弄懂vue两种路由(hash与history)的原理，包括路径改变页面刷新与不刷新，如何与路径联系切换组件的，以及为什么history模式会有点小问题(发请求到后端404这种)
qq_41430522的博客
06-03 874
代码1 锚点测试 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title&g
请说说vue的两种路由模式及区别?history上线问题
06-10
Vue有两种路由模式：hash模式和history模式。 1. hash模式 在hash模式下，URL中#后面的内容称为hash值，用于表示当前页面的状态。hash模式的路由实现是基于浏览器自身的hash机制，通过监听hash值变化来实现前端...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值