Hash 模式和 History 模式的区别

最新推荐文章于 2024-08-04 21:39:33 发布
最新推荐文章于 2024-08-04 21:39:33 发布
阅读量213 收藏 1
点赞数
分类专栏： Vue-Router 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39357822/article/details/119358201
版权

在这里插入图片描述

原理的区别

  • Hash 模式是基于锚点，以及onhashchange事件

通过锚点的值作为路由地址，当路由地址发生变化，触发onhashchange事件，根据路径决定页面上呈现的内容

  • History 模式是基于HTML5中的History API
    • history.pushState() IE10以后才支持 （有兼容性问题）
    • history.replaceState()

pushState() 方法与 push()方法的区别：
当调用history.push()时，路径会发生变化，这时要向服务器发送请求
当调用history.pushState() 时，不会向服务器发送请求，只会改变浏览器地址栏中的地址，并且把地址保存到历史记录中，所以通过pushState() 可以实现客户端路由

hash与history的切换

  • 创建路由时修改mode属性
    在这里插入图片描述
@皮皮榴
关注
专栏目录
Html5 history对象详解
qq_36723759的博客
04-15 1532
这个文章记录的是 html5 原生的 history 对象，不是 vue-router 的 history。 作用 history 接口允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。window.history: 返回当前会话的 history 状态。 属性 history.length 只读,返回一个整数，该证书表示会话历史中元素的数目，包括当前加载的页。 history.scrollRestoration 允许 web 应用程序在历史导航上显示的设置默认滚动恢复行为。此属性可以
Vue-router 中hash模式和history模式的区别
10-18
下面详细讲解这两种模式的区别和相关知识点。 一、hash模式和history模式的区别 1. URL显示方式不同 - hash模式的URL中会带有一个“#”符号，例如`***`，hash之后的部分就是路由地址。 - history模式的URL看起来...
hash路由和history路由的区别
热门推荐
weixin_62930485的博客
03-14 1万+
单页应用是在移动互联时代诞生的，它的目标是不刷新浏览器，而通过感知地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。 不同之处有三点。 一是原理不同。hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法(或者replaceState) 并且 监听popstate事件来实现的。history.pushState会追加历史记录，并更换地
hash模式与history模式的区别(详细版)
最新发布
qq505751223的博客
08-04 716
前端路由的概念起源于单页面应用（SPA, Single Page Application）的发展。SPA通过动态内容更新而不是重新加载整个页面来提高用户体验。前端路由允许开发者定义应用中的不同视图，以及如何在用户与应用交互时导航这些视图。前端路由的和两种模式是实现单页面应用（SPA）中页面导航的两种不同方法。以下是它们之间的主要区别，以及如何配置模式的详细说明。URL结构（表面区别）:工作原理:浏览器历史记录:服务器配置:SEO和用户体验:兼容性:Apache: 使用模块。Nginx: 使用指令。Node.
vue-router的hash模式和history模式，
weixin_30493401的博客
07-15 122
hash模式背后的原理是onhashchange事件,可以在window对象上监听这个事件: window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); let hash = location.hash.slice(1); document.body...
hash模式和history模式
2301_77482196的博客
12-21 1069
哈希模式（Hash Mode）和History模式（History Mode）都是前端路由的两种常见实现方式
Hash模式和History模式的区别
10-29 217
表现形式的区别 Hash 模式 https://music.163.com/#/playlist?id=3102961863 History 模式 https://music.163.com/playlist/3102961863 原理的区别 Hash模式是基于锚点，以及onhashchange事件 Hostory模式是基于HTML5中的History API History.pushState() IE10以后才支持 history.replaceSta
hash模式和history模式区别
04-07
Hash模式和History模式是Vue.js中路由模式的两种选择。Hash模式使用URL的hash部分来模拟一个完整的URL，而History模式则使用HTML5的History API来实现无刷新页面切换。Hash模式的优点是在浏览器兼容性上更好，而...
vue-router中的hash和history两种模式的区别
10-18
### hash模式和history模式的区别 1. **URL变化**：hash模式会将路由信息放在URL的#后面，而history模式的URL看起来更干净，没有#。 2. **历史记录**：hash模式改变时，浏览器的历史记录会增加一个记录项。history...
一文了解vue-router之hash模式和history模式
10-16
本文的主题是关于Vue.js中用于前端路由管理的库vue-router的两种路由模式：hash模式和history模式。它们是vue-router提供的两种主要的导航方式，各有特点，适用于不同的场景和需求。 首先，让我们详细了解一下hash...
路由模式hash哈希模式和history模式的区别
Liberty_yes的博客
02-20 2773
vue中路由模式分为哈希（hash）模式和历史记录（history）模式，如果在路由中没有指定路由模式则默认开启hash模式 什么是hash路由模式？ 路径中从#开始，后面的所有路径都叫做路由的哈希值 哈希值最大的特点就是：它不会作为路径的一部分随着http请求，发给服务器 什么是history路由模式； 路径直接拼接在端口号后面 如何设置路由模式？ 如何选择hash模式和history模式？ hash：路径中多了个#，比较丑，但兼容性好 history：视觉上美观，但兼容性略差
hash模式和history模式的区别
weixin_45616633的博客
12-14 2242
1、hash模式 什么是hash模式 URL中带有"#"号。 例：http://localhost:8080/#/login hash模式的特点 hash模式下，前端路由修改的是#号中的信息，对后端完全没有影响，因此改变hash也不会重新加载整个页面。如果修改不存在的#abc页面，页面也不会跳转，history模式则刚好相反，没有对应的页面就会出现404。 2、history模式 什么是history模式 URL中没有"#"号。 例:http://localhost:8080/login history模式
在Vuejs中，“哈希模式”(Hash Mode) 和“历史模式”(History Mode) 是用于管理路由的两种不同模式。它们是Vue Router库提供的两种路由模式。以下是它们之间的区别:
weixin_46077222的博客
08-31 337
在Vuejs中，"哈希模式”(Hash Mode) 和"历史模式”(History Mode) 是用于管理路由的两种不同模式。它们是Vue Router库提供的两种路由模式。以下是它们之间的区别:
路由的hash和history模式的区别
青春木鱼的博客
08-04 3680
单页应用是在移动互联时代诞生的，它的目标是不刷新整体页面，通过地址栏中的变化来决定内容区域显示什么内容。要达成这个目标，我们要用到前端路由技术，具体来说有两种方式来实现：hash模式和history模式。hash模式是通过监听hashChange事件来实现的，history模式是通过pushState方法+popstate事件来实现的。
Vue-router：13、Hash模式与History模式
tinglis的博客
03-04 2997
Vue-router：13、Hash模式与History模式 13.1 Hash模式与History模式区别 前端路由中，不管是什么实现模式，都是客户端的一种实现方式，也就是当路径发生变化的时候，是不会向服务器发送请求的。 如果需要向服务器发送请求，需要用到ajax方式。 两种模式的区别 首先是表现形式的区别 Hash模式 https://www.baidu.com/#/showlist?id=22256 hash模式中路径带有#, #后面的内容作为路由地址。可以通过问号携带参数。 当然这种模式相对来说
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值