vue页面加载完毕调用函数

作者：至尊巅峰发布日期:2026-04-23 浏览:134

// 在 Vue 组件中，可以通过 `mounted` 生命周期钩子来确保页面加载完毕后调用函数。

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

<script>
export default {
  data() {
    return {
      // 数据属性
    };
  },
  mounted() {
    // 页面加载完毕后调用的函数
    this.pageLoaded();
  },
  methods: {
    pageLoaded() {
      // 在这里编写你希望在页面加载完毕后执行的代码
      console.log('页面已加载完毕');
    }
  }
};
</script>

<style scoped>
/* 样式 */
</style>

解释说明：

mounted 钩子：Vue 组件的 mounted 生命周期钩子会在组件挂载完成后被调用。此时 DOM 已经渲染完成，可以确保页面加载完毕。
pageLoaded 方法：在 mounted 钩子中调用 this.pageLoaded() 方法，确保页面加载完毕后执行特定的逻辑。
模板部分：<template> 中定义了页面的结构，虽然这里没有具体内容，但可以根据需要添加实际的 HTML 结构。

通过这种方式，你可以确保在 Vue 页面完全加载后执行特定的函数。

上一篇：vue extend

下一篇：vue获取当前年份