vue 页面回退mounted函数不执行的解决方案

1.问题描述

当 Vue 页面回退时，如果使用了 keep-alive 组件进行缓存，再次进入该页面时，mounted 钩子函数不会执行。这是因为使用了 keep-alive 缓存组件，导致页面并未被销毁，因此再次进入页面时不会触发 mounted 钩子函数。

2.解决方案

方法一：使用 activated 钩子函数

当使用缓存组件时，在页面再次进入前会触发 activated 钩子函数，因此可以将需要在 mounted 中执行的代码放在 activated 中执行。

示例代码：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
    }
  },
  activated() {
    // 需要在 mounted 中执行的代码
  },
  methods: {
    // 方法
  }
}
</script>

方法二：通过 watch 监听 $route 对象

每当路由发生变化时，$route 对象会发生变化。因此我们可以通过 watch 监听 $route 的变化，来判定页面是否重新进入，如果重新进入则执行 mounted 函数。

示例代码：

<template>
  <div>
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 数据
    }
  },
  watch: {
    $route(to, from) {
      if (to.path === "/YourPath" && from.path === "/") {
        // 页面重新进入时需要执行的代码
      }
    }
  },
  methods: {
    // 方法
  }
}
</script>

以上两种解决方案都可以解决页面回退时 mounted 函数不执行的问题，具体使用哪种方案取决于具体的业务需求和代码实现。