vue钩子函数mounted,页面回退时不执行

已于 2022-03-30 15:18:38 修改
阅读量2k 收藏 2
点赞数
分类专栏： Vue 文章标签： vue mounted mounted不执行 钩子函数
于 2019-11-15 13:47:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43599212/article/details/103083755
版权

一、问题描述

新接手一个电商项目，在商品列表list点击item商品的查看详情按钮时，首次进入详情页，页面会进行渲染，钩子会走mounted,但回退之后，再点击其他商品详情，详情页不会进行更新渲染。
问题代码如下：

商品列表页：

在这里插入图片描述

商品详情页：

在这里插入图片描述

二、解决办法

之后发现 项目做了Keep-alive 但此页面将方法放入了 钩子mounted。此时mounted是不执行的，放入钩子activated，问题解决~~
在这里插入图片描述

烟雨任平生╰
关注
专栏目录
vue 页面回退mounted函数不执行的问题及解决方法
weixin_30530339的博客
08-28 4337
前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新 经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。 原理 其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#O...
vue子组件mounted不执行_vue 页面回退mounted函数不执行的解决方案
weixin_39553805的博客
12-19 1783
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#Options-Lifecycle...
vue 页面回退mounted函数不执行的解决方案
10-15
主要介绍了vue 页面回退mounted函数不执行的解决方案 ，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue路由第二次进入页面后created和mounted不执行
weixin_65915562的博客
07-18 2173
通过以上方法，可以确保在Vue路由中多次进入同一个页面时，导航守卫来确保在路由进入组件之前执行相应的代码。导航守卫：在组件定义时，通过。钩子函数都能被正确执行。
vue多个页面路由传参,浏览器回退,页面判断由前一个页面跳转就使用新数据还是其他页面就使用缓存，钩子函数
weixin_45498171的博客
03-25 1396
1.在App.vue里面使用keep-alive <keep-alive> <router-view v-if="$route.meta.keepAlive"> <!-- 这里是会被缓存的视图组件，比如 page1,page2 --> </router-view> </keep-alive> <router...
vue 加载时掉用mounted_vue 页面回退mounted函数不执行的问题及解决方法
weixin_39531037的博客
12-19 2341
前言最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。原理解决这个问题的关键就在于对keep-alive的理解和activated钩子函数的使用。当在项目中引入keep-alive的时候，页面第一次进入，钩子函数的触发顺序created...
vue路由跳转不执行mounted方法
JiAyInNnNnN123的博客
08-18 8357
2.在路由配置中，当前组件使用了keepalive 导致有缓存，可以不使用keepalive，正常使用mounted生命周期进入即可。activated：被 keep-alive 缓存的组件激活时调用。一进入页面就触发，可用于初始化页面数据。就是解决本文的方式。问题：列表页面，进入详情，使用route跳转传值，进入详情。首次进入执行mounted方法，二次进入不执行mounted方法。离开页面就触发，用于离开清楚当前页面的定时器。keepalive：用于保存组件当前状态，以避免反复重新渲染导致的性能问题。.
vue手机端回退_从外链回退到vue应用不触发生命周期、beforeRouterEnter等钩子函数的问题...
weixin_39996234的博客
01-12 1387
在iphoneX及以上版本从外链回退不触发事件，7P，7没发现这个bug安卓上自测没有发现这个问题最近做项目中发现了一个问题，iphoneX及以上版本从当前vue应用中跳转到外部链接然后在回退到vue应用里面，beforeRouterEnter没有被触发。由于在其他手机上测试没有问题，所以一开始我以为代码写的有问题，然后就开始漫长的找坑之路，后来我将事件放到了created、mounted里面也没...
解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题
10-15
主要介绍了解决VUE mounted 钩子函数执行时 img 未加载导致页面布局的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
VUE 从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新
gvhjb的博客
10-20 490
【代码】VUE 从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新。
vue 在IOS移动端中 windon.open 等跳转外部链接后，返回不触发vue生命周期、mounted等相关事件-解决方法
少年感
08-24 1349
做了一个列表的h5页面，通过点击列表跳转到外部链接，然后返回是回到原来页面状态，类似缓存。发现在ios端返回后，vue 的mounted() 、create()、路由监听等方法都不会执行。在安卓和pc 端都能正常调用。
使用vue钩子函数mounted,页面回退时不执行的问题
热门推荐
qq_41727900的博客
08-14 1万+
  本人近日做前端的后台管理系统项目，一个问题一直都没解决，就是页面中查看详情按钮第一次点击进去详情页可以被渲染，回退出来第二次进去钩子函数没有被执行，网上这类问题的解决方法并不多，一直以来都没解决，今天终于解决，特来记录下。 解决方法：   activated 可以使用这个钩子函数 以下为具体分析： html 部分 &lt;template&gt; &lt;div class="...
**手机上访问Vue项目失败解决方案**
m0_47745235的博客
06-27 2364
手机上访问电脑上运行的Vue项目 Vue3
vue的mounted种函数延迟执行
计算机辅助工程
12-26 3921
mounted() { setTimeout(() => { alert(“hello”) }, 20)} // 延迟20毫秒执行
Vue移动端开发IOS浏览器回退时页面不刷新或未正常发起请求
m0_37128767的博客
06-01 971
移动端微信公众号项目进行UAT测试时遇到一个问题，ios微信浏览器访问项目时回退上一级页面异常，未刷新。网上看的是由于ios回退是从缓存中读取数据的，由于开发环境不方便测试，找到如下解决方法 经测试是有效的，判读用户设备为ios时强制刷新。 mounted () { this.$nextTick(()=>{ //首页跳转返回 IOS不兼容页面自动刷新问题 var u = navigator.userAgent, app = navigator.appVers...
uniapp 返回上一页再进入当前页mounted不执行
最新发布
gxh0816的博客
03-27 1428
但是，首次进入的时候，函数没有被执行。我是因为需要用到onLoad去调用接口函数。所以就将我的自定义函数放到了，onLoad里面，解决了首次进入页面不执行的问题。再通过activated()解决再次进入当前页不执行的问题。最近做项目，使用的uniapp+vue2.碰到了一个问题。如a页面跳转到b页面。点击返回到A页面，再次进入到b页面。在mounted函数中的自定义函数不执行。其实是因为自己基础知识的不扎实，以及vue生命周期的了解不够。经过各种尝试以及网上各位大佬的经验。
vue进入页面执行的钩子函数_使用vue钩子函数mounted,页面回退时不执行的问题
weixin_39589511的博客
12-19 1392
本人近日做前端的后台管理系统项目，一个问题一直都没解决，就是页面中查看详情按钮第一次点击进去详情页可以被渲染，回退出来第二次进去钩子函数没有被执行，网上这类问题的解决方法并不多，一直以来都没解决，今天终于解决，特来记录下。解决方法：activated可以使用这个钩子函数以下为具体分析：html 部分js 部分.....created: function () {console.log(1)},m...
Vue钩子函数深度解析：导航守卫与生命周期
在Vue框架中，钩子函数扮演着至关重要的角色，它们是Vue实例生命周期的一部分，允许我们在特定时刻执行自定义逻辑。Vue的生命周期包含了多个内置的钩子，例如`created`、`mounted`、`updated`和`destroyed`等，每个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值