更改前端路由且不刷新页面的两种方式

最新推荐文章于 2025-04-25 15:30:39 发布
最新推荐文章于 2025-04-25 15:30:39 发布
阅读量3.5k 收藏 3
点赞数 2
分类专栏： JavaScript 文章标签： hash location history pushState replaceState
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/hry1243916844/article/details/106001657
版权
本文详细介绍了URL的hash和HTML5的History API在网页路由中的应用。通过对比pushState和replaceState两个方法，阐述了它们在操作历史记录栈时的不同之处，以及如何改变浏览器地址栏的显示。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1.url的hash

location.hash="名称"

在这里插入图片描述
执行：
在这里插入图片描述
路由变成：
在这里插入图片描述
2.HTML5的history

history.pushState()

三个参数：data,title, url
在这里插入图片描述

执行：
在这里插入图片描述
路由变成：
在这里插入图片描述

history.replaceState()

执行：
在这里插入图片描述
路由变成：
在这里插入图片描述

pushState和replaceState的区别：

pushState()执行的操作类似于压栈，之前执行过的会保存。
replaceState()执行的操作替换，直接替换了上一个路由。

Vue Router的History模式：实现无刷新路由切换的前端技术
RoGroovy的博客
09-20 722
其中，History模式是Vue Router提供的一种路由模式，它通过使用浏览器的History API来实现无刷新的路由切换，让用户在浏览网页时具有更好的体验。而History模式则是使用浏览器提供的History API来管理路由，不需要添加任何特殊的符号。通过使用Vue Router的History模式，我们可以实现无刷新的路由切换，提供更好的用户体验。通过正确地配置服务器，我们就可以在使用History模式的Vue Router应用中实现无刷新的路由切换了。选项，并将其设置为’history’。
前端路由的理解及实现它的两种方法
weixin_46580795的博客
08-02 685
前言 前端本无路由，用的人多了，便有了前端路由。路由这个概念最先是后端出现的。前端路由的出现要从 ajax 开始，这里就不细说了，有兴趣的小伙伴可以去深入了解。接下来，让我们来了解什么是前端路由，并在将来遇到这类问题时，能够精炼简洁的回答出来。 什么是前端路由？ 简单说就是前端控制页面跳转,而不需要向后端去请求 在前端单页应用中，路由描述的是URL和UI(页面)的映射关系 为什么会出现前端路由 以前传统的前端都是一个URL对应一个页面，所以不存在这个问题。随着SPA（single-page applic
Vue路由传参及路由参数变化后而页面不刷新的解决
aozhou9334的博客
07-21 1618
--7.23更新-- 更完善及多样的解决方法 路由传参问题原文 路由参数变化但页面不变化问题原文 仍然是readhub仿站项目，各路由的切换采用了Vue-router，由于实际上各个路由界面的结构是完全相同的，只是各路由对应的API域名不同（如/topic与/news），即获取并填入的数据不同 因此在这里我就只准备了一个子组件（下图的topic.vue，名字还没改哈...
解决网页路由缓存问题(页面不刷新）
最新发布
qq_53642915的博客
04-25 202
使用带有参数的路由时需要注意的是，当用户从 /users/johnny 导航到 /users/jolyne 时，相同的组件实例将被重复使用。因为两个路由都渲染同一个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会被调用。问题：一级分类的切换正好满足上面的条件，组件实例复用，导致分类数据无法更新。方法二：使用 onBeforeRouteUpdate导航守卫。
vue路由传值，修改地址栏参数而不刷新页面
qq_57052578的博客
09-23 3232
vue路由传值，修改地址栏参数而不刷新页面
PC端/移动端,浏览器通过地址修改参数访问H5页面不刷新情况
passWordEnterX的博客
11-10 876
2、需要获取数据的函数在生命周期中 ，首次页面加载已挂载执行完成，当修改url参数时由于路由模式是hash，因而并没有从新读取url，而是在browser的url缓存中读取上一个页面的数据。2、如browser首次已访问链接一，粘贴链接二到URL窗口并回车，只会更新URL窗口显示链接二，并不会刷新页面内容和访问后台；3、鼠标focuse到URL窗口，不对URL内容做任何改变，回车，页面内容刷新正确。粘贴变更的URL只会刷新URL窗口，不。1、PC端，browser首次访问链接一或链接二，均可正常加载；
前端 页面地址栏修改Url参数后回车 路由页面不刷新！
xiaoleiv9的博客
08-04 1935
原因：因为你的路由Url是相同的，vue会认为你是同一个页面，从而复用已加载的页面 从缓存里面拿，而不会重新加载，这个应该跟Vue的热更新有关系；解决方案：可以用侦听，手动刷新，监听路由的变化；
详解SPA中前端路由基本原理与实现方式
10-18
SPA模式下，前端路由的实现主要有两种方法： 1. 利用URL的hash实现前端路由。这是一种常见的方法，通过改变URL中的hash值来实现前端路由的切换，hash值的变化会触发window对象的onhashchange事件。事件监听器可以...
前后端分离，Vue-Router使用history路由模式，页面刷新报401错误
qq_45754184的博客
08-20 639
页面，故返回401错误，所以将页面的路由地址/ops/logManage改成/manageOps/logManage或其他不会被代理配置匹配重写的路径就好了(或者去修改接口请求url地址和代理配置)。路由跳转和请求响应都正常，但是一刷新页面，就出现该401错误，查看vue前端项目，路由使用的是history模式。可看出对于^/ops'开头的请求路径会被重写，所以刷新页面后浏览器向服务器发送的请求。路径被重写后的URL匹配不到。
Vue路由管理：实现前端页面的无刷新路由跳转
Vue路由管理是一种前端开发技术，用于实现单页应用中的路由导航和页面切换。它基于Vue.js框架的路由插件Vue Router，通过配置路由映射，实现不同URL路径对应不同的Vue组件，从而实现页面之间的无刷新跳转。 ## 1.2 ...
Vue路由切换页面不更新问题解决方案
11-19
3. **在组件内部触发路由刷新**： 如果想要在组件内部刷新路由，可以通过注入从父组件提供的方法来实现。在父组件中创建`routerRefresh`方法，然后在子组件中注入并调用它，如示例代码所示。这样，当需要刷新当前...
前端路由的不同方法实现
summer7310的专栏
12-08 7620
在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。 后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controll
在不刷新和不跳转页面的情况下向URL中增删改query参数
万少博-FE
03-16 7281
最新更新时间：2020年09月08日14:10:19 《猛戳-查看我的博客地图-总有你意想不到的惊喜》 本文内容：在不刷新和不跳转页面的情况下向URL中增删改query参数，原理，路由push到和当前相同的路由时，页面不跳转、不刷新。 方案一：原生操作 查询query参数 const{ location } = this.props; const { search } = location; let queryStr = search.slice(1);//age=30&name=wansh
VUE解决路由里的参数改变页面却没有跳转的问题
hhh590_hh的博客
09-02 1898
第一步：修改app.vue文件 <template> <div id="app"> <div class="content"> <router-view v-if="routerAlive"> </router-view> </div> </div> </template> <script> export default{ data(){
改变url 页面不刷新 location.hash history.pushState history.replaceState
weixin_42448623的博客
08-24 2564
文章目录URL的hash监听hash变化HTML5的history模式：pushStateHTML5的history模式：replaceState监听变化 URL的hash URL的hash也就是锚点（#），本质就是改变window.location的href属性 可以通过改变 location.hash 来改变href，页面不会刷新 window.location.hash = "xxx" // => /#xxx 监听hash变化 window.onhashchange = function
两种路由的实现hash和history
weixin_46100406的博客
04-20 543
hash 和 history是主流的两种前端路由实现方式 主要说一下新增的两个API history.pushState() 和 history.replaceState() history pushState() 和 history.replaceState()一样采用三个参数：状态对象，标题（当前被忽略）和（可选）URL。让我们更详细地研究这三个参数中的每一个 状态对象（state obj...
前端路由跳转
cppp1111的博客
03-18 1972
前端路由跳转       目前是两种方式,一种是hash模式,一种是history模式。 两者比较明显的区别是：在一般人的认知里 hash 和 history 的认知可能就在 hash 的 url 里面多了个 # ，而 history 就不会。 对于前端路由来说， hash 和 history 都可以用于前后端分离项目，且两者有各自的特点和各自的使用场景，在使用过程中主要要了解当前项目所处的场景，以便于更好地判断使用哪一种路由模式更佳。
vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)
前端小胡兔的博客
02-20 7077
vue跳转页面后返回不刷新且记录历史滚动条停留位置 (实现了根据不同页面来设置是否刷新记录的功能)
H5路由的pushState()，replaceState()和popstate()用法
窄门狭路的博客
08-30 1687
history.pushState：是H5的方法，用于向history.state中添加url信息history.replaceState：是H5的方法，用于向history.state中替换url信息popstate：是H5的事件，用于监听go和back事件，history.pushState()或history.replaceState()不会触发popstate事件。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值