vue 同一个页面第二次跳转路由内容不更新

问题出现原因

在vue中相同路由之间跳转,默认在跳转路由时会采用缓存策略,并不会刷新当前路由组件。导致mounted(初始化),beforeDestory(销毁)等生命周期钩子函数并不会触发,从而产生路由跳转了,但是视图数据没有变化,数据不主动更新

解决方案
  • 使用 watch 监听路由变化,当路由发生改变时,手动更新数据(设置方法,重新获取对应的数据)
  • 使用App.vue 中为 router-view入口添加参数 :key="$route.fullPath" (vue2,vue3都支持该属性)
  • mounted里面执行的办法在 activated 里面在执行一遍,activated是路由的两个生命周期之一,解释如下图:
  • activated 路由组件被激活时触发
  • deactivated 路由组件失活时触发
相关推荐
恋猫de小郭34 分钟前
Flutter Zero 是什么?它的出现有什么意义?为什么你需要了解下?
android·前端·flutter
崔庆才丨静觅7 小时前
hCaptcha 验证码图像识别 API 对接教程
前端
passerby60618 小时前
完成前端时间处理的另一块版图
前端·github·web components
掘了8 小时前
「2025 年终总结」在所有失去的人中,我最怀念我自己
前端·后端·年终总结
崔庆才丨静觅8 小时前
实用免费的 Short URL 短链接 API 对接说明
前端
崔庆才丨静觅8 小时前
5分钟快速搭建 AI 平台并用它赚钱!
前端
崔庆才丨静觅9 小时前
比官方便宜一半以上!Midjourney API 申请及使用
前端
Moment9 小时前
富文本编辑器在 AI 时代为什么这么受欢迎
前端·javascript·后端
崔庆才丨静觅9 小时前
刷屏全网的“nano-banana”API接入指南!0.1元/张量产高清创意图,开发者必藏
前端
剪刀石头布啊9 小时前
jwt介绍
前端