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

最新推荐文章于 2024-10-23 09:46:21 发布
最新推荐文章于 2024-10-23 09:46:21 发布
阅读量3.3k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zaoqinghuan/article/details/111505736
本文探讨了在Vue项目中遇到的一个特定问题：当从A页面跳转到B页面再返回时，使用nginx部署的服务页面不会刷新。文章分析了问题产生的原因在于微信浏览器的缓存机制，并提供了解决方案。

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

Vue路由跳转后无法返回
2301_79326559的博客
09-28 1884
然而，有时候我们可能会遇到一个问题，就是在路由跳转之后无法返回到前一个页面。这个方法可以将新的URL添加到浏览器的历史记录中，但是并不会触发浏览器的真正的页面刷新。因此，当我们点击返回按钮或者调用返回方法时，并没有进行真正的页面跳转，而是只是修改了URL。在上面的代码中，我们首先导入Vue和Vue Router，并安装Vue Router插件。在Vue应用中，使用Vue Router进行路由跳转时，有时候可能会遇到无法返回到前一个页面的问题。方法，该方法会替换当前的URL，而不会添加新的历史记录。
前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别
星辰迷上大海的博客
03-06 2089
Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。
使用window.location.href跳转页面不刷新的问题
寬真
10-14 3377
此时有个需求就是你想从b页面跳转到a页面，你用了window.location.href，这个时候页面其实是不会被刷新的。解决方式：用完window.location.href 后再用window.location.reload()方法即可。’通常这样写都是可以跳转到目的url的，但是若当前的url和跳转的url是一个的话，页面可能就不会跳转，不会刷新。举个例子，a页面和b页面是通过动态组件展示的，那么a和b的链接其实对应的就是一个，比如都是。
asp.net ajax contentresult 不跳转_Vue 实现前进刷新，后退不刷新的效果
weixin_39627144的博客
11-25 223
https://github.com/woai3c/Front-end-articles​github.com需求一：在一个列表页中，第一次进入的时候，请求获取数据。点击某个列表项，跳到详情页，再从详情页后退回到列表页时，不刷新。也就是说从其他页面进到列表页，需要刷新获取数据，从详情页返回到列表页时不要刷新。解决方案在 App.vue设置：<keep-alive include="list"...
vue中解决微信html5原生ios虚拟键返回不刷新问题
01-18
问题描述： 做微信h5页面时，经过了微信授权才跳转到一级默认路由home.vue中，因此在home页面时在IOS中底部会出现虚拟的返回键，安卓上不会出现。且在IOS点击返回时会跳转到home空白页面不重新加载，但是在安卓机上点击返回键会重新加载。 实现功能： 解决IOS问题(在home页面点返回时路由还是在home页面，并完成重新加载) 分析： 需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个滚动列表，所以我采用了keep-alive路由缓存，所以不能在created()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫befo
JS location.href不重新刷新当前页面
热门推荐
夹扣的博客
05-25 1万+
前言： 前两天在工作中遇到location.href刷新页面不成功的问题，于是在此记录一下。 我的需求： 用Ajax请求后端返回数据和跳转的链接，其中返回的链接有可能是新的url也有可能是当前页面地址栏上的url。刚开始我直接使用window.location.href=url.来实现，即无论返回的什么url我都用window.location.href帮我重定向。 但是后来在测试的时候出...
Vue中，超链接被拦截
weixin_44062380的博客
04-22 977
Vue中，超链接被拦截 之前在使用vue开发的时候，出现这么一个问题 我写一个超链接，想要打开新窗口，前往外链接： <a href="www.baidu.com" target="_blank">前往百度</a> 但是点击以后，却被路由拦截了： 硬是给我加上了 localhost:8080 网上查了很多方法，又说在 js 中用window.location.herf的，又说不要用超链接的 后来我发现，解决的方法很简单 只要在超链接地址前，加上协议名称就行了 .
XSS防御与攻击 基础防范
jokeruan的博客
08-31 325
XSS又称CSS，全称Cross SiteScript，跨站脚本攻击，是Web程序中常见的漏洞，XSS属于被动式且用于客户端的攻击方式，所以容易被忽略其危害性。其原理是攻击者向有XSS漏洞的网站中输入(传入)恶意的HTML代码，当其它用户浏览该网站时，这段HTML代码会自动执行，从而达到攻击的目的。如，盗取用户Cookie、破坏页面结构、重定向到其它网站等。 XSS攻击 XSS攻击类似于SQL注入攻击，攻击之前，我们先找到一个存在XSS漏洞的网站，XSS漏洞分为两种，一种是DOM Based XS
前端一面高频vue面试题总结
bb_xiaxia1998的博客
10-26 579
其基本实现原理需要做的事多点（输出完整 HTML），除了，还需如数据获取填充至 、客户端混合（）、缓存等等。相比于其他模板引擎（, 等），最终要实现的目的是一样的，性能上可能要差点事件修饰符v-model 的修饰符键盘事件的修饰符系统修饰键鼠标按钮修饰符v-if 在编译过程中会被转化成三元表达式,条件不满足时不渲染此节点。v-show 会被编译成指令，条件不满足时控制样式将对应节点隐藏 （display:none）Proxy 的优势如下:Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说
vue面试总结60道题！！快收藏！！！
model__的博客
09-28 5437
目录 1.Vue 的核心是什么 2.请简述你对 vue 的理解 3.请简述 vue 的单向数据流 4. Vue 常用的修饰符有哪些 5.v-text 与{{}}与 v-html 区别 6.v-on 可以绑定多个方法吗 7.Vue 循环的 key 作用 8.什么是计算属性 9. Vue 单页面的优缺点 10.Vuex 是什么？怎么使用？在那种场景下使用 11.Vue 中路由跳转方式（声明式/编程式） 12.vue 跨域的解决方式 13.Vue 的生命周期请简述 14.Vue 生命周
Vue keep-alive实践总结
。
07-10 261
&lt;keep-alive&gt;是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。&lt;keep-alive&gt; 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。和 &lt;transition&gt; 相似，&lt;keep-alive&gt; 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在父组件链中。prop:include: 字符...
H5在跳转其他域名后，浏览器回退事件不会触发vue生命周期钩子导致回退时数据状态没有刷新
最新发布
z368374的博客
10-23 520
在用户跳转至三方url后，如果用浏览器回退按钮返回到我方H5，在ios中会遇到不会触发vue生命周期钩子事件，导致页面没有理想中刷新数据状态，所以找了一个方法解决
vue2项目，企业微信跳转第三方地址，使用history.back(),返回页面不刷新
weixin_47411869的博客
05-11 515
企业微信浏览器可能有自己的缓存机制，导致使用history.back()返回时不会刷新页面。为了解决这个问题，你可以考虑在返回页面时手动触发页面刷新。你可以通过在页面中监听pageshow事件来实现，在这个事件触发时刷新页面。
uview vue 在通过href跳转新页面 在回来时候 如何触发刷新当前页面问题（通用）
lyq1948的博客
11-17 492
【代码】uview vue 在通过href跳转新页面 在回来时候 如何触发刷新当前页面问题（通用）
Vue项目中微信浏览器页面刷新问题
Lucky_Q的博客
04-08 5814
运行在微信浏览器中的Vue项目，当需要用户主动对页面进行刷新时，会遇到如下问题： 微信不支持location.reload()方法，在微信浏览器中会失效 Vue中的路由跳转是类似于ajax局部刷新，因此使用location.href=‘xxx+时间戳’ 这种方法时，页面不会重载 Vue自带的this.$router.go(0)无效 history.go(0)无效 通过后来的研究和学习，找到了一...
vue点击浏览器的返回按钮失效_vue-微信浏览器左上角返回按钮拦截
weixin_34000790的博客
12-23 919
【需求】在微信公众号开发中，有时需要对浏览器左上角返回按钮进行拦截处理相关的页面逻辑，而并不是让页面直接返回上一页，之前在这个细节点上的一直实现得不是很好。但看到京东购物公众号上的效果却实现得非常好，所以自己也开始了这方面的尝试。京东的效果如下图：从上图京东购物效果上来看，在点击搜索拉起一个搜索界面，然后点击左上角反回，只是将搜索界面收起，而页面没有重新像读取进度条一样去返回，而我页面需要的正是这...
vue2跳转外部链接 ios系统浏览器返回时需要返回两次
qq_35469137的博客
08-19 444
当用a链接window.location.href跳转时，项目中发现ios系统浏览器返回时需要返回两次才能到达上个页面，而安装系统手机未发现此问题，这是ios系统浏览器自带的特性。第一次返回相当于只是返回到vue项目中，第二次返回才是到上个页面，解决方式有两种。第一 改用window.open（url,'_blank'）方式跳转。第二 使用路由导航钩子。
解决vue页面跳转不刷新问题
cflydk的博客
05-20 1815
**问题场景：**当点击A页面某条记录跳转到B页面时，第一次正常，当再返回A页面点击其他记录跳转到B页面时，B页面数据没刷新，还是原来第一次的，原因是vue 同一路由跳转不走生命周期，导致数据不更新，不管是动态路由还是传参，都不走。 解决办法： // 使用 watch 监听路由变化，手动更新数据 watch: { ‘$route’: function(to, from) { this.getList() } }, 其实就是将原来 created() 里的内容再写一遍到watch里就可以了。 ...
Vue全家桶与Vant实现电商单页面应用开发教程
Vue.js 是一套构建用户界面的渐进式JavaScript框架，它通过数据驱动和组件化的概念来构建复杂的单页面应用。Vue2.x是该框架的第二代主版本，提供了响应式数据绑定、组件系统和丰富的API等特性。本项目使用Vue2.x作为...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值