当前位置：首页 > VUE

vue实现开屏广告

2026-02-17 03:21:57VUE

Vue 实现开屏广告的方法

在 Vue 项目中实现开屏广告，可以通过以下几种方式完成。以下是具体的实现步骤和代码示例。

vue实现开屏广告

使用动态组件实现广告弹窗

创建一个广告组件，并在主页面中动态加载，设置定时器控制广告显示时间。

vue实现开屏广告

<template>
  <div v-if="showAd">
    <div class="ad-overlay">
      <div class="ad-content">
        <img src="@/assets/ad.jpg" alt="广告" />
        <button @click="closeAd">跳过广告</button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showAd: true,
    };
  },
  mounted() {
    setTimeout(() => {
      this.showAd = false;
    }, 5000); // 5秒后自动关闭广告
  },
  methods: {
    closeAd() {
      this.showAd = false;
    },
  },
};
</script>

<style>
.ad-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}
.ad-content {
  position: relative;
}
.ad-content button {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}
</style>

结合路由守卫控制广告显示

通过 Vue Router 的导航守卫，在进入首页时显示广告，之后跳转到目标页面。

// router.js
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import AdPage from './views/AdPage.vue';

Vue.use(Router);

const router = new Router({
  routes: [
    {
      path: '/',
      name: 'ad',
      component: AdPage,
    },
    {
      path: '/home',
      name: 'home',
      component: Home,
    },
  ],
});

// AdPage.vue
<template>
  <div class="ad-page">
    <img src="@/assets/ad.jpg" alt="广告" />
    <button @click="skipAd">跳过广告</button>
  </div>
</template>

<script>
export default {
  mounted() {
    setTimeout(() => {
      this.$router.push('/home');
    }, 5000);
  },
  methods: {
    skipAd() {
      this.$router.push('/home');
    },
  },
};
</script>

使用本地存储记录广告状态

通过 localStorage 记录广告是否已经显示过，避免每次进入应用都显示广告。

// AdComponent.vue
<script>
export default {
  data() {
    return {
      showAd: false,
    };
  },
  mounted() {
    const hasSeenAd = localStorage.getItem('hasSeenAd');
    if (!hasSeenAd) {
      this.showAd = true;
      localStorage.setItem('hasSeenAd', 'true');
      setTimeout(() => {
        this.showAd = false;
      }, 5000);
    }
  },
};
</script>