vue系列 url的hash和HTML5的history

最新推荐文章于 2024-05-30 11:27:58 发布
最新推荐文章于 2024-05-30 11:27:58 发布
阅读量82 收藏
点赞数
分类专栏： Vue 文章标签： vue javascript hash html url
本BLOG上原创文章未经本人许可，不得用于商业用途。转载请注明出处，否则保留追究法律责任的权利。
本文链接：https://blog.csdn.net/kpc0564335/article/details/119403878
版权

url的hash和HTML5的history

URL的hash

URL的hash也就是锚点(#), 本质上是改变window.location的href属性.
我们可以通过直接赋值location.hash来改变href, 但是页面不发生刷新

history

H5的history接口是HTML5新增的, 它有五种模式改变URL而不刷新页面，history是一个栈

history.pushState()

history.back()

相当于浏览器的返回历史上一页，等价于 history.go(-1)

history.forward()

等价于 history.go(1)

history.go()

history.replaceState()

我是一言
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
vue 路由有⼏种模式?有什么区别?原理是什么?(面试必问)
wtt_promise的博客
10-18 228
路由模式不会还有人不会吧
vue面试题之二：路由 vue-router 面试题
Arthas_Xue的博客
09-19 1万+
2. vue路由面试题 1. mvvm框架是什么？ mvvm即Model-View-ViewModel，mvvm的设计原理是基于mvc的 MVVM是Model-View-ViewModel的缩写，Model代表数据模型负责业务逻辑和数据封装，View代表UI组件负责界面和显示，ViewModel监听模型数据的改变和控制视图行为，处理用户交互，简单来说就是通过双向数据绑定把View层和Model层...
vue-router的两种模式的区别
热门推荐
qq_39077561的博客
05-22 1万+
1、大家都知道vue是一种单页应用,单页应用就是仅在页面初始化的时候加载相应的html/css/js一单页面加载完成,不会因为用户的操作而进行页面的重新加载或者跳转,用javascript动态的变化html的内容 优点: 良好的交互体验,用户不需要刷新页面,页面显示流畅, 良好的前后端工作分离模式,减轻服务器压力, 缺点: 不利于SEO,初次加载耗时比较多 2、hash模式 vue-router默...
vue相关面试题:1.route和router区别；2.history和hash两种模式区别
xiaolu567的博客
07-28 345
浏览器在刷新的时候，会按照路径发送真实的资源请求，如果这个路径是前端通过historyAPI设置的URL，那么在服务端往往不存在这个资源，于是就返回404了。在上面的例子中，我们利用a标签设置了两个路由导航，把app当做视图渲染容器，当切换路由的时候触发视图容器的更新，这其实就是大多数前端框架哈希路由的实现原理。当前激活的路由信息对象。这个属性是只读的，里面的属性是immutable(不可变)的，不过可以watch(监测变化)它。缺点路径在井号#的后面，比较丑。............
Vue相关面试问答（如何监听路由参数的变化、完整的 vue-router 导航解析流程、vue-router有哪⼏种导航钩⼦（ 导航守卫 ）、vue-router的⼏种跳转⽅法....)
weixin_48780364的博客
11-19 253
Vue相关面试问答（如何监听路由参数的变化、完整的 vue-router 导航解析流程、vue-router有哪⼏种导航钩⼦（ 导航守卫 ）、vue-router的⼏种跳转⽅法、vue-router有⼏种参数传递⽅法、 如何定义嵌套路由，使⽤嵌套路由可以实现什么功能、vue-router实现路由懒加载、vue-router两种模式、mint-ui解决的是什么问题？和bootstrap有什么区别）
url的hash和HTML5的history模式
webchang的博客
01-18 1169
url的hash模式和HTML5的history模式，两者的含义和区别
Vue router 模式 hash 和 history
weixin_42754922的博客
03-27 3637
目录 hash 模式 Vue-router hash history 模式 Vue-router传参 在浏览器中改变地址栏url，将会触发页面资源的重新加载，这使得我们可以在不同的页面间进行跳转，得以浏览不同的内容。但随着单页应用的增多，越来越多的网站采用ajax来加载资源。因为异步加载的特性，地址栏上的资源路径没有被改变，随之而来的问题就是页面的状态无法被保存。这导致我们难以通过熟悉的方式（点击浏览器前进/后退按钮），在前后的页面状态间进行切换。 为...
vue-router中Hash模式和History模式
老电影故事的博客
10-29 7814
vue-router 中hash模式和history模式 在vue的路由配置中有mode选项，最直观的区别就是在url中hash 带了一个很丑的 # ，而history是没有#的。vue默认使用hash。 从用户角度看 前端路由实现了两个功能（使用ajax更新页面状态的情况下） 1、记录当前页面的状态（保存或分享当前页的url，再次打开该url时，网页还是保存的（分享）时的状态）； 2、可是使用浏览器的前进后退功能（如点击后退按钮，可以使页面回到ajax更新页面之前的状态，url也回到之前的状态） 作为开
vueRouter history模式和hash模式的区别
weixin_42707287的博客
10-28 2105
vueRouter
区分vue-router的hash和history模式
01-21
　为了构建 SPA（单页面应用），需要引入前端路由系统，这也就是 Vue-Router 存在的意义。 　前端路由的核心，就在于：改变视图的同时不会向后端发出请求。 　为了达到这种目的，浏览器当前提供了以下两种支持： 　1...
Vue-router 中hash模式和history模式的区别
12-10
Vue-router 中hash模式和history模式的关系 在vue的路由配置中有mode选项 最直观的区别就是在url中 hash 带了一个很丑的 # 而history是没有#的 mode:”hash”;  mode:”history”;  hash模式和history模式的...
一文了解vue-router之hash模式和history模式
12-11
当前版本: 3.0.3 类目录: src/history/base.js hash模式 即地址栏 URL 中的 # 符号（此 hash ...利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。（需要特定浏览器支持）这两个方法应用
HTML5实现无刷新修改URL的方法
12-13
今天在做一个vue的搜索功能，需要从搜索结果页面跳转到细节页面，然后点击返回还能返回到刚刚的结果页面，如果只用window.history.go(-1)当然会重新刷新搜索页面，当然是不行的。 我尝试了俩种方式来修改url: ...
Vue路由history模式解决404问题的几种方法
12-10
vue-router 默认是hash模式，使用url的hash来模拟一个完整的url，当url改变的时候，页面不会重新加载。但是如果我们不想hash这种以#号结尾的路径时候的话，我们可以使用路由的history的模式。比如如下网址：使用hash...
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1066
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
`“use strict“`在JavaScript中是什么？它背后的原理是什么？
Jerry学长
05-27 1056
JavaScript的严格模式（strict mode）是ECMAScript 5引入的一项特性。如果你在脚本或函数的顶部声明 ，你就启用了严格模式： 当JavaScript引擎看到这个指令时，它将开始以一种特殊的模式解释代码。在这种模式下，当检测到某些可能导致潜在错误的编码实践时，会抛出错误。这就是严格模式背后的基本原理。考虑下面这个例子： 开发者可能因为强迫症而对齐数值字面量，但这样会无意中使变量 初始化为八进制字面量。在非严格模式下，这将被解释为值 （十进制）。然而，在严格模式下，这样的代码会抛出错
Vue3实战笔记（52）—Vue 3封装持仓分析饼图
最新发布
山花的博客
05-30 306
接上文，封装持仓分析饼图。封装好几个组件，用于后续开发。把忧愁煮成茶，让它在心间慢慢沉淀，剩下的，便是清甜的回味。
Vue3 - 实现一个雨水滴落的动画效果
良月柒
05-29 140
在 Vue 3 中实现一个雨水滴落的动画效果，可以使用 HTML5 的元素和 JavaScript 来绘制和控制动画。
React-useState
weixin_46479909的博客
05-29 192
本质：和普通JS变量不同的是，状态变量一旦发生变化组件的视图UI也会跟着变化（useState是一个React Hook（函数），它允许我们向组件添加一个。，从而控制影响组件的渲染结果。
vue router的hash和history
03-16
Vue Router的hash和history是两种不同的路由模式。 hash模式是指在URL中使用#符号来表示路由，例如：http://example.com/#/home。在hash模式下，路由的变化不会导致浏览器向服务器发送请求，因此可以实现单页应用的...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

我是一言

让我看看你的头像

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值