Vue2中如何在每个页面创建后调用JavaScript函数？

可以实现，最常用的方案是使用Vue2的全局混入（Global Mixin），它能让你把生命周期钩子或方法注入到所有Vue组件中，避免重复编写代码。

实现步骤 #

1. 创建全局混入文件 #

在项目中新建一个混入文件（比如src/mixins/globalLifeHook.js），在里面定义你需要全局触发的生命周期钩子（created或mounted）和对应的函数：

// src/mixins/globalLifeHook.js
export default {
  // 选择你需要的生命周期钩子：created 或 mounted
  created() {
    this.runGlobalFunction()
  },
  methods: {
    runGlobalFunction() {
      // 这里写你要全局执行的业务逻辑
      console.log('当前组件已创建，全局函数触发')
      // 比如调用接口、初始化数据等操作
    }
  }
}

2. 在main.js中全局注册混入 #

打开项目入口文件main.js，引入并注册这个全局混入：

// src/main.js
import Vue from 'vue'
import App from './App.vue'
import globalLifeHook from './mixins/globalLifeHook'

// 全局注册混入
Vue.mixin(globalLifeHook)

new Vue({
  render: h => h(App)
}).$mount('#app')

这样一来，所有Vue组件在created（或你指定的钩子）阶段都会自动调用runGlobalFunction函数，不需要在每个.vue文件中重复编写。

注意事项 #

• 全局混入会作用于所有Vue组件（包括第三方UI组件库的组件），如果只想让函数在页面级组件（即路由渲染的组件）中触发，可以在钩子中添加判断逻辑：

created() {
  // 通过$route判断当前组件是否是路由页面组件
  if (this.$route) {
    this.runGlobalFunction()
  }
}

或者根据组件的name属性、自定义标识来筛选目标组件。

• 如果需要在mounted阶段触发，只需把混入中的created替换为mounted即可，逻辑完全一致。

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