解决Vue跳转路由不触发Created、Mounted等生命周期钩子函数问题。

最新推荐文章于 2024-05-06 15:16:12 发布

ZhangBin0612

最新推荐文章于 2024-05-06 15:16:12 发布

阅读量4.8k

点赞数 2

CC 4.0 BY-SA版权

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/ZhangBin0612/article/details/129065453

在Vue中，当路由使用Keep-alive造成数据未实时更新时，可以在目标组件中添加`activated`钩子来处理。该钩子会在组件被激活时调用，用于实现数据的刷新。例如，在B模块添加`activated()`方法，可以确保路由跳转后触发数据更新。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

解决Vue跳转路由不触发Created、Mounted等生命周期钩子函数问题。

场景：在A模块下添加了数据，切换路由去B模块查看添加好的数据时，没有实时刷新最新数据。

原因：因为路由中使用了Keep-alive，让路由之间产生了缓存，所以不刷新最新的数据（除非F5手动刷新）。

在这里插入图片描述

解决：在B模块的Vue文件中添加activated生命周期钩子函数。

activated(){
    console.log('路由跳转触发')
},

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZhangBin0612

关注关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

Vue项目路由参数改变，接口没有重新调用

qq_38541936的博客

06-02

1342

文章目录前言一、先上解决方案二、简单讲解1.常用到的地方2.watch中的【'$route'】3.完整的代码总结前言 Vue项目路由参数改变，接口没有重新调用一、先上解决方案在watch里面添加一个【’$route’】的方法 watch: { // 深度监听路由改变事件 '$route': { handler () { // 这里的this.initData()就是自己项目接口调用的方法，可以根据自己的项目修改成对应的方法 this..

前端Vue篇之Vue-router 导航守卫有哪些、Vue-router 路由钩子在生命周期的体现、Vue-router跳转和location.href有什么区别

星辰迷上大海的博客

03-06

2031

Vue Router 中的导航守卫包括 beforeEach、beforeResolve、afterEach 和路由独享守卫 beforeEnter。这些守卫允许您在路由切换前、解析完成后和路由切换后执行自定义逻辑，比如权限验证、全局加载状态等。

1 条评论您还未登录，请先登录后发表或查看评论

vue多次跳转同一页面不触发created刷新数据

Front小思的博客

06-27

1402

今天遇到一个问题，就是vue中跳转同一个详情页面的时候，路由没有变化，但是后面的参数有变，需要重新触发created钩子函数来触发方法来刷新数据！

vue 路由跳转页面生命周期不执行的问题

Jovan的博客

01-12

3096

vue 路由跳转页面生命周期不执行的问题

VUE路由跳转，created方法不再执行

qq_45603086的博客

04-26

618

console.log('路由发送变化doing...');添加路由监听，路由改变时执行监听方法。

vue路由跳转不执行mounted方法

JiAyInNnNnN123的博客

08-18

9204

2.在路由配置中，当前组件使用了keepalive 导致有缓存，可以不使用keepalive，正常使用mounted生命周期进入即可。activated：被 keep-alive 缓存的组件激活时调用。一进入页面就触发，可用于初始化页面数据。就是解决本文的方式。问题：列表页面，进入详情，使用route跳转传值，进入详情。首次进入执行mounted方法，二次进入不执行mounted方法。离开页面就触发，用于离开清楚当前页面的定时器。keepalive：用于保存组件当前状态，以避免反复重新渲染导致的性能问题。.

vue 路由子组件created和mounted不起作用的解决方法

10-16

在这个问题中，开发者遇到了在路由子组件中`created`和`mounted`钩子函数不触发的情况。通常，这些生命周期钩子在组件实例创建和挂载到DOM时会被调用，但当涉及到路由跳转和`keep-alive`缓存策略时，可能会出现异常...

解决vue做详情页跳转的时候使用created方法数据不会更新问题

10-15

1. Vue的生命周期钩子函数created和mounted：这两个钩子函数分别在组件实例被创建和挂载到DOM后调用。在这些钩子函数中，开发者通常会进行数据的初始化和获取。但在非刷新的页面跳转中，可能无法获取到最新的数据。 ...

vue 页面回退mounted函数不执行的解决方案

10-15

总的来说，理解和掌握 Vue 的生命周期以及 `keep-alive` 的工作原理，对于解决页面回退时数据不更新的问题至关重要。通过使用 `activated` 钩子和适当的数据监听，可以确保组件在回退时能够正确地更新和展示数据。在...

解决Vue使用bus总线时,第一次路由跳转时数据没成功传递问题

11-20

Vue组件的生命周期包括多个阶段，如`beforeCreate`、`created`、`beforeMount`、`mounted`等。当从一个页面（页面1）跳转到另一个页面（页面2）时，页面1的生命周期会经历一系列的钩子函数，直到被销毁。同时，页面2...

vue系列：跳转到同一个路由参数不同但是不触发更新的问题

分享前端开发工程师的一些日常生活、前端知识点、职业发展、对一些问题的看法、感悟等等

12-25

650

在要跳到到的页面监听路由 watch: { $route (to, from) { if (from.query.type) { console.log('拿到传来的query', from.query.type) } } }

vue多次跳转同一页面不触发created和mounted，没有初始化

我的博客

12-24

6411

问题：从gtiHub上拉的后台管理系统的代码 vue-admin-template模板，从列表页跳转进详情页，只在第一次跳转时加载created和mounted，第二次直接使用页面缓存了，查了半天，发现原因就在开发者的“手摸手”系列的官方文档中…真是对自己的大无语事件上代码：解决方法：一般大家应该都是这样实现页面跳转，但会发现id=001和id=002的在页面上的数据时一样的，然后控制台打印几条信息就会发现是因为第二次进页面时不会触发vue的created或者mounted钩子，官方说你可以通过w

vue路由自己跳转自己生命周期不触发

举案齐眉意难平

07-25

1114

因为vue有缓存机制，这个缓存机制和keep-alive没有关联，当router跳转时，如果你跳转的新路由地址和旧的地址是相同的path或者name。他不是没有跳转，跳了，但是也仅仅是跳了。今天接到了一个简单的需求（可以不看，这段没用），要求在导航栏加上菜单切换之后可以重新渲染左侧树，左侧的树要再次触发跳转。也可能这是一个没有办法处理的问题，因为不论是监听还是如何都是不能完美的解决这个需求。亲测无效都是相当于整体刷新页面，这种完全是js的处理方式也解决不了咱们的问题，页面整体刷新同上也不是我们想要的效果。

vue路由跳转不触发mounted方法

m0_52948787的博客

01-05

3494

将mounted(){},换成activated(){}方法 activated:进入当前存在activated()函数的页面时，一进入页面就触发；可触发多次 mounted:只触发一次

VSCode 开发Vue必备插件

2301_78416672的博客

05-06

880

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！

vue 多个路由路由跳转created不执行

weixin_41380972的博客

08-29

5242

问题今天做项目的时候发现，vue页面路由跳转的时候，created函数不执行。 created() { }, 解决办法使用watch函数监听路由即可。 watch:{ '$route'(to,from){ } }, 响应路由参数的变化提醒一下，...

vue component created没有触发_必争武林秘籍-Vue生命周期流程图

weixin_39631316的博客

11-25

173

最近在看Vue的生命周期，就把各个流程整理一篇内功心法观察各个阶段虚拟dom树和真实dom树的渲染情况，每一个组件或者实例都会经历一个完整的生命周期，大体总共分为三个阶段：初始化、运行中、销毁且听我一步一步解析：实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载到，只是一个空壳，无法访问到数据和真实的dom，...

vue component created没有触发_vue常见知识点

weixin_39781209的博客

11-21

1010

一、vue的双向绑定原理（vue的原理、简单说一下双向数据绑定）vue是采用数据劫持结合发布者-订阅者模式的方式，通过object.defineProperty()来劫持各个属性的setter和getter，在数据变动时发布消息给订阅者，触发响应的监听回调具体步骤：第一步：需要observe的数据对象进行递归遍历，给各个属性加上setter和getter，从而监听数据的变化第二步：compile解...

vue除了生命周期函数还有哪些钩子函数