赶毕业设计遇到的问题|2

2.Vue页面定时自动跳转到静态的html页面

  这里有两个需求点：

1. Vue页面跳转到html页面
2. 定时跳转

解决方案：

写一个定时器，当倒计时5秒钟后，自动跳转到指定页面。

<template>
  <div :style="{background:'url('+require('../../static/background.jpeg')+')'}"
       style="background: no-repeat; background-size:100% 100%;height: 100vh; overflow: hidden; position: relative" >

    <div style="width: 800px; height: 700px; border-radius: 10px;
    margin: 50px 100px;padding: 50px">
      <div style="font-size: 30px; font-weight: bold; color:#d9e7f8;
      margin-bottom: 20px">登录成功！！<br><span>倒计时{{countdown}}秒，为您跳转到首页：）</span>
        <br>
        <div style="color: #005f93; font-size: medium;"><a href="../../../public/static/homepage.html"></a>立即跳转</div>
      </div>

    </div>

  </div>
</template>

<script>

export default {
  data() {
    return {
      countdown: 5,
      timer: null
    };
  },
  methods: {

  },
  //start:倒计时5秒钟
  mounted() {
    this.timer = setInterval(() => {
      if (this.countdown > 0) {
        this.countdown--
      }
      else {
        clearInterval(this.timer)
        console.log()
        window.location.href = '../../../static/homepage.html' //需要跳转html页面的地址（或者是存放html页面的文件地址）
        // this.$router.push('/login')
      }}, 1000)
  }
  //end:倒计时5秒钟
}
</script>