vue-router 如何router.back返回上一个页面，但是不触发页面的onActivated?

作者站长头像
站长
· 阅读数 16

vue3项目中页面的前进后退都会重新刷新页面，使用<keep-alive>解决了这个问题，有些页面必须得进入之后刷新数据，所有我又使用了onActivated方法，但是从上一个页面返回到这个页面，还是会触发这个事件，怎么让他只有跳转到这个页面才触发onActivated， 返回到这个页面的不触发呢？

回复
1个回答
avatar
test
2024-06-19

首先根据你的描述,你应该是想要解决在路由更改时根据不同的情况来决定是否请求数据.

然后说下你遇到的问题,使用了keep-alive,但是不想触发对应的onActivted方法,这是不行的.因为对应的钩子函数是在组件整个生命周期当中的一环,既然已经是了缓存组件,那么一定会触发对应的缓存组件的钩子.

我提供了几种思路:

  1. 使用keep-alive,但是对应的数据请求放在mounted中,然后在当前路径中添加参数,通过watch对应的路由参数的值来判断是否进行请求逻辑.
  2. 使用消息订阅和发布,在router.push(xx).then(()=>触发订阅)中设置keep-alive的includes或者excludes让当前页面被排除在缓存之外,然后更新页面的key值,将对应的页面再添加进缓存.相当于刷新了当前的组件.(如果存在其他请求接口的逻辑,可能会导致页面重复请求两次,建议封装本地的请求做缓存处理,同接口同参数的接口短时间重复请求使用第一次的结果)
  3. 当然你也可以再push的then方法中通过消息发布来触发对应页面的请求.
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容