2.Vue页面定时自动跳转到静态的html页面
这里有两个需求点:
- Vue页面跳转到html页面
- 定时跳转
解决方案:
写一个定时器,当倒计时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>