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

Question

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

Answer 1

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

Answer 2

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

Answer 3

要实现只有进入页面时触发 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 从而能再次触发。