关于vue单页面返回上一路由时在ios上mounted不执行的问题

最新推荐文章于 2024-08-31 22:02:55 发布
最新推荐文章于 2024-08-31 22:02:55 发布
阅读量130 收藏
点赞数 3
分类专栏： JavaScript Vue 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41567857/article/details/141634392
版权

  本人在做一个单页面的移动端网页时遇到的这个问题。在详情页填入数据提交后，返回上一页安卓端的mounted钩子函数执行了，但是在ios上并没有执行，查阅了部分资料，一下是解决方法。

  利用的是keep-alive这个vue的内置标签。
  keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。使用keep-alive包裹住项目之后生命周期就多了两个钩子函数activated和deactivated。这个时候可以把mounted中的函数放在deactivated中，就可以实现返回页面的时候ios上的数据也刷新了

布偶123.
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue单页面在iOS微信浏览器中弹出底部栏导致的样式问题
前端李小白的博客
06-01 1419
只需要在app.vue的mounted里面添加如下代码即可解决这个问题 mounted() { const u = navigator.userAgent const isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) if (isiOS) { window.history.pushState({}, 'title', '#') } }, 如果出现了无法滚动的Bug，可以尝试使用以下方式解决， 例如，这个w
在vue中封装一个betterscroll组件，并解决ios、Android在微信页面上下拉出现滑动的问题
前端李小白的博客
03-31 2942
最近在开发微信公众号网页的时候，发现使用原生滚动的时候，ios在微信网页下，上拉，下拉都会出现一大片的空白，看起来极其的别扭，为了解决这一问题，找了许多参考资料，如下是解决方法。 1.首先在你需要禁止滑动的页面中添加如下代码 mounted（）{ document.body.addEventListener( 'touchmove', function (e)...
vue中解决微信h5原生ios虚拟键返回不刷新问题
weixin_44824839的博客
10-20 1034
问题描述：在安卓机上点击手机自带的返回键会返回上一级路由并重新加载，而ios机上并不会重新加载 分析：需要在进入页面时加入监听，并在页面离开时移除监听。因为home页面是个列表滚动，所以采用了keep-alive路由缓存，所以不能在mounted()和beforeDestroy()生命周期中写，因此我在home.vue中加了组件内的守卫beforeRouteEnter()，beforeRouteLeave (),并在里面添加监听、移除监听。 注意： addEventListener()与removeEven
vue在微信里面的兼容问题_Vue单页面应用+微信网页开发·填坑小记
weixin_39693662的博客
12-22 614
上两个星期做了一个公司用于推广的小活动，选择了Vue的单页面应用。【Vue单页面应用+微信网页开发】套餐赠送了超值大坑，在这里给大家分享一下我的辛酸，啊不，填坑记录。主要是前端填坑的实现，后台方面没有太多涉猎，小白所记，不正确、不准确的还请多多指教。坑的方位：1、微信网页授权登录(前后端分离导致的跨域问题)2、接入JS-SDK实现分享等功能(history模式副带的页面刷新问题和iOS、Andro...
weixin公众号页面返回上一层_解决微信返回上一页之后，页面不刷新
weixin_39690097的博客
12-22 2648
问题描述: A页面跳转到B页面,在B页面进行了相关的操作之后,返回到A页面,A页面的数据没有刷新.具体实例:由于项目中使用了vue，使用了gulp和普通的页面跳转。并没有引入vue-router。所以不能使用 watch监控$router。微信公众号ios点击后退按钮，优选读取缓存，所以vue里的生命周期不会在进行调用。所以项目中执行隐藏分享qq，空间。等功能不被再次执行。原因分析:一.andro...
安卓嵌套vue单页面的缩放问题
weixin_44997513的博客
12-06 462
安卓方法设置 webView.getSettings().setSupportZoom(true);//设置可缩放 webView.getSettings().setBuiltInZoomControls(true);// 设置WebView可触摸放大缩小 webView.getSettings().setUseWideViewPort(true);//使用html的viewport webView.getSettings().setDisplayZoomControls(false); //隐藏原生的缩放
vue单页面在ios微信浏览器中首次跳转后页面底部会被微信导航栏遮盖住的问题解决方案
Hgh_1997的博客
03-23 2263
// 第一个是去掉默认微信导航栏 // 第二个是重新再次获取高度 ，写死高度里面用 overflow-y: scroll去做滚动 mounted() { // 只有微信浏览器中IOS系统才会出现的问题，由于导航栏的占了高度，所以要重新获取 setTimeout(()=>{ uni.getSystemInfo({ success:res => { ...
【vue】vue中如何实现SPA 单页面应用_09
青春木鱼的博客
06-21 4166
SPA（ single page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。所以，基于以上特性，对单页应用来说模块化的开发和设计显得相当重要。..................
vue单应用在ios系统中实现微信分享功能
热门推荐
Aifangmy的博客
12-29 3万+
表示是第一次使用vue做单应用显目，也是在逐渐的摸索中~更是各种踩坑，各种填坑，打算写博客么？是因为不想写笔记了，嗯嗯 就是这么简单 进入正题。 刚开始做微信分享的这个功能的时候，脑补了官方文档微信JS-SDK说明文档 基础的知识不多说了，反正多看文档总是没错的~在安卓系统上面分享是没出错的，但是在ios上面问题就来了，表示无限吐槽ios，但是吐槽归吐槽，问题总是该解决的—在网上百度了很多vue单...
vue 如何添加全局函数或全局变量以及单页面的title设置总结
08-30
vue 全局函数或全局变量设置及单页面 title 设置总结 在 Vue 项目中，需要设置全局函数或全局变量以便在整个项目中使用...同时，我们也可以使用特殊的方法来设置单页面的 title，以解决在 iOS 的微信上不兼容的问题。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 1534
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
vue ref和reactive区别
灰海
08-25 5488
在第二个示例中，我们使用了reactive来创建一个名为state的响应式对象，它包含name和age两个属性。在模板中，我们通过{{ state.name }}和{{ state.age }}来显示state对象的属性值。在第一个示例中，我们使用了ref来创建一个名为count的响应式引用，它是一个简单的数字类型。在模板中，我们通过{{ count }}直接显示count的值，而不需要.value前缀，因为Vue的模板语法会自动处理ref的.value访问。
如何使用Vue 3和Type Script进行组件化设计
yang295242361的博客
08-27 1599
在Vue 3中，Composition API 是一种全新的逻辑复用和代码组织方式，它允许你将组件的逻辑（如响应式状态、计算属性、方法、生命周期钩子等）封装到单独的函数中，从而提高了代码的可复用性和可维护性。以下是如何在Vue 3中使用Composition API的基本步骤。
足球联赛|基于SprinBoot+vue的足球联赛管理系统(源码+数据库+文档)
伟庭的博客
08-27 1213
系统阐述的是使用足球联赛管理系统的设计与实现，对于Java、B/S结构、MySql进行了较为深入的学习与应用。主要针对系统的设计，描述，实现和分析与测试方面来表明开发的过程。开发中使用了ssm框架和MySql数据库技术搭建系统的整体架构。
vue3中如何拿到element plus中el-tree多选的值？
爱敲代码的卡拉米的博客
08-30 436
首先我们要为el-tree设置show-checkbox（它的作用是：节点是否可被选择），然后为el-tree绑定ref。vue2中我们在标签中绑定过ref后会用this.$refs.xxx来进行获取。vue3中的ref跟vue2中的ref获取方式略有不同。
vue.js项目实战案例详细源码讲解
最新发布
yang_xs的博客
08-31 489
为帮助你更好地掌握Vue.js项目的开发流程，我将为你讲解一个完整的Vue.js实战案例，并提供详细的源码解析。这个案例将涵盖从项目创建到实现各种功能模块的全过程，适合用于构建一个具有基本CRUD功能的简单任务管理应用。我们将开发一个任务管理应用（Task Manager），它允许用户添加、查看、编辑和删除任务。任务列表显示：展示所有任务的列表。添加任务：允许用户添加新的任务。编辑任务：支持用户编辑现有任务。删除任务：允许用户删除任务。
vue+moment转化日期格式为年月日时分秒！最简洁版
demotang的博客
08-30 281
官网：https://momentjs.cn/
Vue动态表头数据
lplovewjm的博客
08-27 595
本文主要解决场景：表头不固定、从后端数据中拿取表头并渲染到页面中。
vue 一个页面设置keepalive一个页面不设置keepaive deactivated在mounted之前执行
09-04
在Vue中，使用`keep-alive`组件可以将指定的页面缓存起来，以便在切换时保留页面的状态，提高用户体验。现在有一个需求，需要在一个页面设置`keep-alive`，而另一个页面不设置，并且在设置了`keep-alive`的页面在`mounted`钩子执行前进行`deactivated`钩子的操作。 首先，在需要设置`keep-alive`的页面中，在组件上添加`<keep-alive>`标签，将需要缓存的内容放置在`<keep-alive>`标签内部，例如： ```vue <template> <keep-alive> <div> ...页面内容... </div> </keep-alive> </template> ``` 接下来，在该页面的`Vue`实例中，添加一个`deactivated`钩子函数，实现在`mounted`之前执行的操作，例如： ```vue <script> export default { // ... deactivated() { // 在此执行需要在 mounted 之前执行的操作 // ... }, mounted() { // 在此执行页面 mounted 钩子的操作 // ... } } </script> ``` 对于不需要设置`keep-alive`的页面，直接在`<router-view>`标签中引入对应的组件即可。 这样，当从含有`keep-alive`的页面切换到其他页面时，`deactivated`钩子函数会在当前页面缓存之前执行。当再次切回含有`keep-alive`页面时，页面会从缓存中恢复，并执行`activated`钩子函数和`mounted`钩子函数。 通过以上步骤，我们实现了在一个页面设置`keep-alive`，而另一个页面不设置，并且在设置了`keep-alive`的页面在`mounted`钩子执行前进行`deactivated`钩子的操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值