前端 页面地址栏修改Url参数后回车 路由页面不刷新！

已于 2024-08-16 16:45:52 修改
阅读量1.1k 收藏 2
点赞数
文章标签： 前端
于 2023-08-04 14:39:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiaoleiv9/article/details/132104093
版权

关于：页面地址栏修改Url参数后回车 路由页面不刷新的问题 需要回车两次才会触发刷新 重新加载

      原因：因为你的路由Url是相同的，vue会认为你是同一个页面，从而复用已加载的页面 从缓存里面拿，而不会重新加载，这个应该跟Vue的热更新有关系；

     解决方案：可以用侦听，手动刷新，监听路由的变化；

Sing前端-悟空
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue下URL地址栏参数改变却不能刷新界面
夏已微凉、
05-20 3709
一、前言二、原因三、解决 一、前言 下拉选择，根据不同的值展示不同的内容，初次点击可以获取到相应的值，但是当第二次点击时，虽然地址栏的参数改变了，但页面内容并没改变。 URL 如下： http://127.0.0.1:8080/#/user?hobby=study http://127.0.0.1:8080/#/user?hobby=play 二、原因 vue项目中路由跳转默认采用hash的方式，而hash的变化不会导致浏览器发送请求到服务器； 将获取数据的的函数的执行放在了Vue生命周期函数 .
js修改地址栏url_前端实战总结如何在不刷新页面的情况下改变URL
weixin_39557087的博客
12-03 1279
由于公司最近有个需求是想让我们的get请求的参数都直接显示在浏览器url上，这样我们就可以直接通过复制url来显示对应的界面数据了。背景介绍由于我们常用的http请求一般是基于XHR对象的实现或者fetch实现，这种请求操作并不会触发浏览器url的变化，这样虽然也能正常请求数据并渲染到页面，但是如果用户在当前页面操作了某个get请求并得到了某条数据，想通过链接将当前看到的界面分享给其他人...
vue中修改url的请求参数，浏览器没有反应的解决方案
qq_58291481的博客
06-01 1436
vue中修改url的请求参数,浏览器没有反应的解决方案
解决 Vue 页面中地址栏参数变更不刷新的问题
最新发布
Hello World
08-03 553
在一次Vue项目开发中，遇到了只改变路由中的参数，路由地址不改变页面数据不刷新的问题。造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。
vue vue-router 同一个页面地址栏参数改变，页面不刷新的问题
qq_25103439的博客
09-04 2868
vue-router同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。 解决办法有两种： 1：监听地址栏变化（watch）,这是vue-router官方给出的解决办法。 监听路由变化，把初始化的方法重新写到监听的方法里面执行 2、给router-view加个唯一的key，来保证路由切换时都会重新...
vue 同一个页面地址栏参数改变，页面不刷新的解决方案
aichimaodeyuybh的博客
08-12 2042
在vue项目开发中，只改变路由中的参数，路由地址不改变页面数据不刷新问题；造成这个问题的原因，是因为 vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。监听地址栏变化（watch），这是vue-router官方给出的解决办法。监听路由变化，把初始化的方法重新写到监听的方法里面执行。
如何在JS中实现修改URL参数而不刷新页面
TianXuab的博客
12-14 1917
在网页开发中，经常会遇到需要在不刷新页面的情况下修改URL参数的需求。这在许多情况下都是非常有用的，比如在单页面应用程序中动态更新页面内容，或者在需要动态加载不同数据的情况下。本文将介绍如何在JavaScript中实现这一功能。
修改url，页面不刷新
weixin_54666101的博客
11-19 223
var currenturl = window.location.href; history.pushState('','',currenturl +'?profile');//前两个参数可省略
修改 url 但页面不刷新的方法
weixin_45548211的博客
05-09 2431
pushState与replaceState 想要修改当前页面的 url，又不想刷新页面，首推 pushState与replaceState 这对姐妹花！ 下面就来好好介绍一下它们俩： 特性 都属于 HTML5 的新特性，由于功能强大，可以做到改变 url 且不需要刷新页面，所以经常在单页应用中使用：vue-router, react-router-dom。 相同点 参数 data(any)：存储JSON字符串，可以用在popstate事件中； title(string)：现在大多数浏览器不支持或者忽略这
「都是url惹的祸」（问题：小数点参数被截取｜刷新页面找不到资源）
weixin_53512283的博客
08-18 625
「都是url惹的祸」（问题：小数点参数被截取｜刷新页面找不到资源）
纯html页面怎么进行路由,前端路由一探
weixin_39724362的博客
06-04 2119
什么是前端路由路由，引导、指路之意。譬如我们熟知的路由器，蹦跶在网络层的数据包转发设备，在网络中也是扮演着指路明灯的角色，肩负着将数据包正确导向目的地址的重任。前端路由也借用了这个词，但是承担的工作全然不同，它是服务于客户端浏览器的指路人。所谓的前端路由，拥有这样一种能力：客户端浏览器可以不依赖服务端，根据不同的URL渲染不同的视图页面。前端路由的存在合理性在Ajax之剑还未亮出，前端仍处于襁褓之...
vue部署后刷新白屏404？前端路由模式详解（hash和history）
hhhhhhhssss的博客
07-12 3758
前言 不知道大家有没有遇到过一种情况，当自己的vue部署在服务器上时，一切都如想象办运转，然后脑袋duang的一下，突然想去刷新，然后网页就duang的一下，白屏了。 不出意外的话，我猜你用的一定是history的路由模式。 没错，这就是history中的一个问题，接下来让我们一起探索一下前端路由吧！ 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np impo
前端路由的理解及实现它的两种方法
weixin_46580795的博客
08-02 604
前言 前端本无路由，用的人多了，便有了前端路由。路由这个概念最先是后端出现的。前端路由的出现要从 ajax 开始，这里就不细说了，有兴趣的小伙伴可以去深入了解。接下来，让我们来了解什么是前端路由，并在将来遇到这类问题时，能够精炼简洁的回答出来。 什么是前端路由？ 简单说就是前端控制页面跳转,而不需要向后端去请求 在前端单页应用中，路由描述的是URL和UI(页面)的映射关系 为什么会出现前端路由 以前传统的前端都是一个URL对应一个页面，所以不存在这个问题。随着SPA（single-page applic
vue路由传值，修改地址栏参数而不刷新页面
qq_57052578的博客
09-23 2647
vue路由传值，修改地址栏参数而不刷新页面
PC端/移动端,浏览器通过地址修改参数访问H5页面不刷新情况
passWordEnterX的博客
11-10 767
2、需要获取数据的函数在生命周期中 ，首次页面加载已挂载执行完成，当修改url参数时由于路由模式是hash，因而并没有从新读取url，而是在browser的url缓存中读取上一个页面的数据。2、如browser首次已访问链接一，粘贴链接二到URL窗口并回车，只会更新URL窗口显示链接二，并不会刷新页面内容和访问后台；3、鼠标focuse到URL窗口，不对URL内容做任何改变，回车，页面内容刷新正确。粘贴变更的URL只会刷新URL窗口，不。1、PC端，browser首次访问链接一或链接二，均可正常加载；
vue nuxt.js qurey参数改变页面不刷新（内容没变）
m0_64968930的博客
04-13 491
如果点击跳转改变qurey中的某个值，页面没有刷新，内容没有变；
在当前页面 （不 刷新）情况下 向url添加参数
weixin_54397440的博客
10-20 238
【代码】在当前页面 （不 刷新）情况下 向url添加参数。
如何改变URL而不刷新页面
m0_46802773的博客
03-12 498
URL的hash     URL的hash就是锚点，本质上是改变window.location的href属性。可以通过直接复制location.hash来改变href，饭页面不发生刷新。 HTML5的history模式：pushState     history接口是html5新增的，他有五种模式改变URL而不刷新页面。 history.pushState() history.replaceState() history.go
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值