Vue与Vuex中路由切换时触发目标路由函数的问题咨询

首先得明确你遇到问题的核心原因：当从路由2返回路由1时，如果路由1的组件被Vue的缓存机制（比如keep-alive）保留了，created、beforeMount这类生命周期钩子只会在组件第一次创建初始化时执行，返回时不会再次触发。下面分两种常见场景给你具体的实现方案：

场景1：组件未使用keep-alive缓存 #

如果你的路由1组件不需要保留状态，每次进入都重新渲染，那么可以用组件内的路由守卫 beforeRouteEnter，它会在每次进入路由前触发：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  // 每次进入路由1时触发，包括从路由2返回的情况
  beforeRouteEnter(to, from, next) {
    // 这里不能直接用this，因为组件实例还未创建
    next(vm => {
      // vm就是当前组件的实例，在这里调用你的目标函数
      vm.runTargetFunction();
    });
  },

  methods: {
    runTargetFunction() {
      console.log("路由1的执行函数触发了");
      // 这里写你的业务逻辑
    }
  }
}
</script>

这种方式下，不管是首次进入路由1，还是从路由2返回，都会触发这个守卫并执行你的函数。

场景2：组件使用keep-alive缓存（更常用的场景） #

如果路由1的组件被<keep-alive>包裹，需要保留组件状态，那么可以用activated生命周期钩子——这个钩子会在组件被激活（进入路由）时触发，涵盖首次进入和从其他路由返回的所有情况：

<template>
  <!-- 你的组件内容 -->
</template>

<script>
export default {
  // 每次组件被激活（进入路由1）时触发
  activated() {
    this.runTargetFunction();
  },

  methods: {
    runTargetFunction() {
      console.log("路由1的执行函数触发了");
      // 这里写你的业务逻辑
    }
  }
}
</script>

要是你需要区分「首次进入路由1」和「从路由2返回路由1」的情况，可以结合beforeRouteLeave记录来源路由：

<script>
export default {
  data() {
    return {
      isFromRoute2: false
    };
  },

  beforeRouteLeave(to, from, next) {
    // 记录是否跳转到了路由2
    if (to.name === "Route2") { // 替换成你实际的路由2的name
      this.isFromRoute2 = true;
    } else {
      this.isFromRoute2 = false;
    }
    next();
  },

  activated() {
    // 仅当从路由2返回时执行函数
    if (this.isFromRoute2) {
      this.runTargetFunction();
      this.isFromRoute2 = false; // 重置状态，避免下次误触发
    }
    // 如果希望首次进入也执行，直接调用this.runTargetFunction()即可
  },

  methods: {
    runTargetFunction() {
      console.log("从路由2返回，执行函数");
    }
  }
}
</script>

额外补充：全局路由守卫（适合多路由复用逻辑） #

如果这类逻辑需要在多个路由中复用，也可以用全局的beforeEach守卫，通过判断路由的来源和目标来执行逻辑：

// 在router/index.js文件中
router.beforeEach((to, from, next) => {
  // 当进入路由1时（包括首次进入和从路由2返回）
  if (to.name === "Route1") { // 替换成你实际的路由1的name
    // 这里可以执行全局逻辑，或者通过Vuex、事件总线通知对应组件执行函数
    console.log("进入路由1，执行指定函数");
  }
  next();
});

不过这种方式更适合全局通用的逻辑，单个组件的需求还是用组件内的钩子更灵活。

内容的提问来源于stack exchange，提问作者Vick Sain