环境：

• 电脑系统是Ubuntu 使用vscode编辑器
• 项目包是使用vue-cli搭建的脚手架
• 使用vuetify框架
• 文件的后缀名为 .vue
• （ 切换页面使用路由切换 ）
  

<template>
  <v-app>
    <v-layout row justify-center>
      <v-dialog v-model="dialog" persistent max-width="290">
        <v-card>
          <v-card-text>
            该页面正在部署中，即将为您跳转github界面
            <span>{{Num}}</span> s.
          </v-card-text>
          <v-card-actions>
            <v-btn dark color="blue" @click="isdialog" class="mx-auto">退出</v-btn>
          </v-card-actions>
        </v-card>
      </v-dialog>
    </v-layout>
  </v-app>
</template>
<script>
export default {
  data() {
    return {
      temp: null,  //定义计时器
      Num: 7, //从第7秒开始倒计时
      dialog: true //当页面打开时，对话框呈现打开状态并且开始倒计时
    };
  },

  //在这个钩子函数下效果只会实现一次，再次进入页面没有对话框
  // mounted() {
  //   this.dialog = true; //每次页面打开时，对话框随之打开
  //   this.countDown(); //设在该钩子函数下，表示，当页面打开时，开始倒计时
  // },

  // 在实际页面中，要在这个函数下，退出进入主页后，再次进入这个页面效果才会存在，若在mounted中，那只会实现一次，退出再次进入该页面后，对话框不会打开
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // 通过 `vm` 访问组件实例
      vm.dialog = true; //每次页面打开时，对话框随之打开
      vm.countDown(); //设在该钩子函数下，表示，当页面打开时，开始倒计时
    });
  },
  
  methods: {
    countDown() {
      let temp = setTimeout(this.countDown, 1000);
      // this.temp = setTimeout(this.countDown, 1000);
      this.Num = this.Num - 1;
      if (this.Num === 1) {
        window.location.href = "https://github.com/"; //倒计时结束后，跳转到github
        clearTimeout(temp); //关闭计时器
      }
    },
    //点击对话框中的退出时，触发的事件
    isdialog() {
      this.dialog = false; //对话框关闭
      clearTimeout(this.temp);
      // this.$router.push("/");   跳转到官网主页（设置过路由的）
      window.location.href = "https://www.google.com"; //此处为了展示效果，退出后跳转到谷歌
    }
  }
};
</script>