Vue路由第二次进入页面后created和mounted不执行_vue生命周期created和mounted为什么不会被调用-CSDN博客

本文链接：https://blog.csdn.net/weixin_65915562/article/details/131790072

在Vue中，beforeRouteEnter和beforeRouteUpdate是两个重要的导航守卫，用于在路由进入和更新组件时执行特定逻辑。beforeRouteEnter确保在组件实例化前运行代码，而beforeRouteUpdate则在再次访问同一组件时触发，允许在不重新创建组件的情况下更新数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用beforeRouteEnter导航守卫：在组件定义时，通过beforeRouteEnter导航守卫来确保在路由进入组件之前执行相应的代码。例如

export default {
  data() {},
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 在组件实例化之前执行一些逻辑
      vm.customLogic();
    });
  },
  created() {
    // 此时`created`钩子函数将会执行
  },
  mounted() {
    // 此时`mounted`钩子函数将会执行
  },
  methods: {
    customLogic() {
      // 定义在`beforeRouteEnter`中调用的自定义逻辑
    },
  },
};

使用beforeRouteUpdate导航守卫：如果你已经进入了组件并且下一次访问同一个组件，可以使用beforeRouteUpdate导航守卫来执行相应的代码，如下所示：

export default {
  data() {},
  beforeRouteUpdate(to, from, next) {
    // 执行一些逻辑
    this.customLogic();
    next();
  },
  created() {
    // 第一次进入页面时，`created`钩子函数将会执行
  },
  mounted() {
    // 第一次进入页面时，`mounted`钩子函数将会执行
  },
  methods: {
    customLogic() {
      // 定义在`beforeRouteUpdate`中调用的自定义逻辑
    },
  },
};

通过以上方法，可以确保在Vue路由中多次进入同一个页面时，created和mounted钩子函数都能被正确执行。