vue单页面使用loaction.href跳转新页面，返回原来页面后，页面不刷新

最新推荐文章于 2023-09-14 15:16:59 发布
最新推荐文章于 2023-09-14 15:16:59 发布
阅读量2.9k 收藏 1
点赞数 2
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaoqinghuan/article/details/111505736
版权

在vue项目中，有时我们会遇到这样的问题：
没有使用keep-alive。
在微信浏览器或者在企业微信环境下，在A页面中用window.location.href跳转到新页面B，然后点击浏览器返回按钮回到之前的页面A，这时，我们会发现用nginx起的服务页面会不刷新，在用node起服务中页面是正常刷新的。为什么会出现这样的问题呢?是因为微信浏览器对页面进行了缓存。
解决方法:
在这里插入图片描述

前端对象
关注
  • 2
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue返回上一页不刷新页面
weixin_44986077的博客
11-20 4771
项目需求：由于公司产品较多页面加载相对慢，所以每次进行页面的刷新影响客户下单的效率。 1.首先对router.js进行操作 import indexOne from '@/components/indexOne' { path: '/indexOne', name: 'indexOne', component: indexOne, link: '/indexOne', meta: { keepAlive: true // 需要缓存 } },
vue单页面实现当前页面刷新或跳转时提示保存
10-17
主要介绍了vue单页面实现当前页面刷新或跳转时提示保存，在当前页面刷新或跳转时提示保存并可取消刷新，以防止填写的表单内容丢失，感兴趣的小伙伴们可以参考一下
vue页面跳转后返回原页面初始位置方法
11-28
vue页面跳转到新页面之后，再由新页面返回到原页面时候若想返回调出原页面的初始位置，怎么来解决这个问题呢？首先我们应该在跳出页面时候记录下跳出的scrollY，返回原页面的时候在设置返回位置为记录下的scrolly即可，scrolly我用的是vuex状态管理器来保存的。整个环境是基于vue-cli搭建的 一、main.js里面配置vuex //引用vuex import Vuex from 'vuex' Vue.use(Vuex) 二、main.js里面vuex状态管理 var store = new Vuex.Store({ state: { recruitScrollY:0 }
使用window.location.href跳转页面不刷新的问题
grfstc的博客
04-13 3393
window.location.href = 'http://xxx’通常这样写都是可以跳转到目的url的，但是若当前的url和跳转的url是一个的话，页面可能就不会跳转，不会刷新 举个例子，a页面和b页面是通过动态组件展示的，那么a和b的链接其实对应的就是一个，比如都是https://www.baidu.com，此时有个需求就是你想从b页面跳转到a页面，你用了window.location.href，这个时候页面其实是不会被刷新的 解决方式：用完window.location.href 后再用windo
Vue keep-alive实践总结
。
07-10 184
<keep-alive>是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。<keep-alive> 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 <transition> 相似，<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符...
解决使用window.open()或window.location.href跳转后返回/后退原页面不能再度跳转的问题
vvv3171071的博客
11-24 1万+
使用window.open()搭配参数_self(新页面替换当前页面)，或使用window.location.href跳转到新页面后，再点击后退到原页面，再重新进行跳转事件时，页面不仅没有进行跳转，且没有任何反应（控制台无错误信息）。 说得笼统一点，这是因为第一次跳转时window.open()或window.location.href已经记录过一个要跳转的值了，跳转或后退到原页面时，该值没有被清空，再次执行事件时自然会没有反应。 思路： 定义一个全局变量记录window.open()打开的窗体 如过该.
JS location.href不重新刷新当前页面
热门推荐
夹扣的博客
05-25 1万+
前言： 前两天在工作中遇到location.href刷新页面不成功的问题，于是在此记录一下。 我的需求： 用Ajax请求后端返回数据和跳转的链接，其中返回的链接有可能是新的url也有可能是当前页面地址栏上的url。刚开始我直接使用window.location.href=url.来实现，即无论返回的什么url我都用window.location.href帮我重定向。 但是后来在测试的时候出...
asp.net ajax contentresult 不跳转_Vue 实现前进刷新，后退不刷新的效果
weixin_39627144的博客
11-25 186
https://github.com/woai3c/Front-end-articles​github.com需求一：在一个列表页中，第一次进入的时候，请求获取数据。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。解决方案在 App.vue设置：<keep-alive include="list"...
vue单页面应用打开新窗口显示跳转页面的实例
10-17
在Vue.js开发中，单页面应用（SPA）通常利用vue-router进行页面间的导航。然而，在某些特定场景下，我们可能需要在单页面应用中打开一个新的浏览器窗口来展示跳转的页面，而原始窗口则保持不变。这篇教程将详细介绍...
vue实现几秒后跳转新页面代码
10-14
在Vue.js框架中，有时我们需要实现一个功能，即在用户完成某个操作后，等待几秒钟再自动跳转到新的页面。这种需求常出现在用户确认操作、加载数据或等待某些处理完成后。本文将详细讲解如何在Vue中实现这个功能，...
网页链接跳转的记录
a99101的博客
05-12 594
使用 `window.location.replace()` 方法跳转页面和使用 `window.location.href` 方法跳转页面一样，在直接使用这些方法进行页面跳转时不会触发 Vue 实例的任何生命周期钩子函数。需要注意的是，如果页面中使用了一些异步加载的资源（例如图片、脚本、样式等），这些资源的加载并不一定会在页面重新加载完成时都完成，因此可能还会触发一些其他的生命周期事件。2. unload事件：在页面销毁后触发，可以用来处理一些页面销毁后的逻辑，例如清理一些资源。
vue使用window.location.href 跳转失败
最新发布
qq_43654065的博客
09-14 2339
vue项目中直接使用window.lcocation.href跳转外链，但是跳转的链接会被拼接成这样。
vue-router和location.href的用法区别是什么？
sdasadasds的博客
12-28 1112
vue-router和location.href的用法区别。
vue 跳转到其他页面并关闭当前页面
weixin_43657954的博客
09-05 4750
使用场景：我在做一个调用虚拟机录屏的一个操作，需要在浏览器页面上，点击按钮后，关闭当前页面里的某一个页面，并且打开浏览器新页面是虚拟机的页面，访问的是后端返回来的地址。注意，我这里是从 this.$store.state.app.tagNavList 一层一层找的，你也可以全局写一下。2.像这种页面的关闭，不是直接关闭浏览器页面。
vue ie浏览器 页面缓存 不请求接口
qq_39542702的博客
12-03 507
E浏览器第一次发请求没有问题,再发送请求时，当参数一样时，浏览器会直接使用缓存数据. 导致页面 还是原来的页面 所以在axios 请求头 添加时间戳 const service = axios.create({ // api的base_url baseURL: process.env.BASE_API // timeout: 30000 // request timeout }) ...
解决vue单页面跳转返回后页面不刷新的问题
weixin_30594001的博客
11-16 5077
一、问题：在vue项目中通过location.href跳转到第三方页面，然后点击浏览器返回按钮回到自己的页面，用nginx起服务页面不刷新，在用node起服务中页面是正常刷新的； 二、产生该问题的原因：微信浏览器对页面进行缓存； 三、解决方案： 1 　　 window.onpageshow = null; 2 window.onpageshow = functi...
location.href跳转外链，返回上一页时，ios页面显示空白,但安卓和电脑端页面正常
weixin_44883704的博客
07-29 1773
这个问题有点坑人，刚发现问题的时候，以为是ios没刷新导致的，于是做了刷新处理 window.onpageshow = function(event) { if (event.persisted) { window.location.reload() } }; 但发现无论怎么写，ios页面还是显示空白。在网上也找不着答案，于是询问了一个朋友，朋友那边模拟了我这边的跳转，页面都是正常显示，这个时候我就以为是uni的
vue返回上个页面，页面不刷新，使用vue的keep-alive
努力奔跑的小不点
03-22 7926
1.在路由上添加keepAlive为true，该页面缓存，进去该页面，不会刷新 { path: 'list', component: () => import('@/views/merchants/list'), name: 'merchantsList', meta: { title: '商户列表', noCache: false, keepAlive: true } }, 2.在app.vue添加以下内容 <keep-alive> <router-view
vue location.href跳转不刷新页面
08-16
当使用Vue中的`location.href`进行页面跳转时，如果当前页面的URL和跳转的URL是相同的，页面可能不会刷新。这是因为`location.href`只会在URL发生改变时才会重新加载页面。例如，如果你想从页面B跳转到页面A，并且它们的URL是相同的（例如都是https://www.baidu.com），那么页面可能不会刷新。 另外，当使用`location.href`进行页面跳转时，如果存在一个提交按钮并且在触发事件后会先提交表单，那么页面跳转可能会失效。解决这个问题的方法是将按钮的类型从`submit`改为`button`。 如果你希望在跳转后刷新页面，可以在使用`window.location.href`后再使用`window.location.reload()`方法，这样页面会重新加载。 综上所述，如果你在Vue中使用`location.href`进行跳转并希望刷新页面，你可以尝试以下解决方案： 1. 确认跳转的URL和当前页面的URL是否相同，如果相同，则可能不会刷新页面。 2. 如果存在一个提交按钮并且在触发事件后会先提交表单，考虑将按钮的类型改为`button`。 3. 在使用`window.location.href`后，使用`window.location.reload()`方法重新加载页面。 希望这些解决方案对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [使用window.location.href跳转页面不刷新的问题](https://blog.csdn.net/u010856177/article/details/127306432)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] - *2* [window.location.href 跳转失效问题解决办法](https://blog.csdn.net/qq_39506434/article/details/130256273)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值