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

Question

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

Answer 1

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

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

我提供了几种思路:

1. 使用keep-alive,但是对应的数据请求放在mounted中,然后在当前路径中添加参数,通过watch对应的路由参数的值来判断是否进行请求逻辑.
2. 使用消息订阅和发布,在router.push(xx).then(()=>触发订阅)中设置keep-alive的includes或者excludes让当前页面被排除在缓存之外,然后更新页面的key值,将对应的页面再添加进缓存.相当于刷新了当前的组件.(如果存在其他请求接口的逻辑,可能会导致页面重复请求两次,建议封装本地的请求做缓存处理,同接口同参数的接口短时间重复请求使用第一次的结果)
3. 当然你也可以再push的then方法中通过消息发布来触发对应页面的请求.

Answer 2

要实现只有进入页面时触发 onActivated 而返回时不触发，可以通过维护一些状态来区分是首次进入还是返回。
以下是一种可能的实现方式示例：

import { ref } from 'vue';

export default {
  setup() {
    const isFirstEnter = ref(true);

    onActivated(() => {
      if (isFirstEnter.value) {
        // 在这里执行只有首次进入时要做的事情
        isFirstEnter.value = false;
      }
    });

    onDeactivated(() => {
      // 当页面离开时，将状态重置为 true，以便下次进入能触发
      isFirstEnter.value = true;
    });

    return {};
  },
};

这样，当首次进入页面时，isFirstEnter 为 true 会执行相应逻辑并将其设为 false，而后续返回时由于状态已经是 false 就不会再执行特定动作。当页面再次离开并重新进入时，状态又会被重置为 true 从而能再次触发。

Answer 3

不太明白，如果是跳转到这个页面的话就把逻辑写到onShow等方法中不就行了？为什么非要写到onActivated中，这样返回就不会触发，只有跳转才触发。
或这非要都用onActivated可以用Pinia来存储一个标识来区别对待。

---

哦，我以为是uniapp，纯h5路由确实不好用，想起原先用vant做时同样遇到过此情况，当时貌似是用keep-alive的include来解决的，我找下原先的代码，但是现在也看不太懂当时的逻辑了，建议还是用uniapp，最少路由这个比vue-router要好很多，没有你说的这种情况。

Answer 4

根据作者描述看，需求是回退到当前页面不需要刷新数据，重新进入当前页面需要刷新数据。方案是用keep-alive。同时借助keep-alive标签的include的属性，在进入当前页面时修改include的值，使得当前页面组件可以被匹配保持缓存，退出当前页面时，修改include的值，使得当前页面不被匹配。