404页面跳转倒计时实现原理

404页面倒计时一般都是10左右跳转至指定页面，那么实现的原理是什么呢？

结合上文vue2和vue3中404页面实现

主要就是通过：setInterval(()=>{},time)来进行实现：

<template>
    <div class="not_found">
        <p>
            页面将在<span>{{ time }}</span>秒后自动跳转首页，<br>
            您也可以点击这里跳转<a href="/">首页</a>
        </p>
    </div>
</template>

<script>
export default {
    // 定义属性
    data() {
        return {
        //定义页面显示内容
            time: '10',
         //定时器
            time_end: null
        }
    },
    methods: {
        GoIndex() {
        //因为是1000毫秒也就是1秒后才执行，所以我们定义为 9
            let _t = 9;
            this.time_end = setInterval(() => {
            //如果不等于 0
                if (_t !== 0) {
                //内容就等于数字每秒减一
                    this.time = _t--;
                } else {
                //replace进行路由得跳转
                    this.$router.replace('/')
                //清楚定时器
                    clearTimeout(this.time_end)
                    this.time_end = null
                }
            }, 1000)
        }
    },
    // 生命周期 - 创建完成（可以访问当前this实例）
    created() {
        this.GoIndex()
    },
    destroyed() {
    //清楚定时器
       clearTimeout(this.time_end)
       this.time_end = null
   }, // 生命周期 - 销毁完成
}
</script>

<style scoped lang='less'>
...
</style>

注意：在页面销毁时，一定要清除计时器，因为有时候会点击首页超链接进行跳转，如果不清除会浪费资源