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

问题出现原因

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

解决方案
  • 使用 watch 监听路由变化,当路由发生改变时,手动更新数据(设置方法,重新获取对应的数据)
  • 使用App.vue 中为 router-view入口添加参数 :key="$route.fullPath" (vue2,vue3都支持该属性)
  • mounted里面执行的办法在 activated 里面在执行一遍,activated是路由的两个生命周期之一,解释如下图:
  • activated 路由组件被激活时触发
  • deactivated 路由组件失活时触发
相关推荐
风骏时光牛马4 小时前
数据可视化管理平台
前端
哎哟喂呢哈4 小时前
VedioJS 10
javascript·html5
仿生狮子9 小时前
OpenAI 攻下千禧年难题之后,开发者似乎无动于衷
前端·数学·vibecoding
夏幻灵12 小时前
JavaScript this 面试:五种绑定规则、优先级与常见面试陷阱
开发语言·javascript·面试
Lvan的前端笔记12 小时前
docker:每个前端项目一个 Nginx 容器还是只有一个Nginx容器
前端·nginx·docker
三天不学习13 小时前
Egg.js 4 突然爆火,原因是否归结于AI 原生落地需求爆发?
前端·javascript·全栈·egg.js
xcs1940514 小时前
前端 vue 的前端页面debugger 进不去
前端·javascript·vue.js
明月_清风15 小时前
Deno 终局来了:从挑战 Node 到被 Cloudflare 收编
前端·后端·node.js
Csvn16 小时前
框架性能优化
前端