vue 制作 倒计时页

1. 创建一个 Vue 项目并安装 Vue-router

2. 新建一个倒计时组件 Countdown.vue，在该组件内部定义一个计时器变量和一个倒计时函数：

<template>
  <div>
    <h1>倒计时</h1>
    <p>{{ countDown }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 60,
      countDown: ""
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      if (this.count > 0) {
        this.count--;
        this.countDown = `${this.count}s`;
      } else {
        clearInterval(this.timer);
        this.$router.push("/");
      }
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  }
};
</script>

3. 在 App.vue 中定义路由和链接：

<template>
  <div id="app">
    <router-link to="/countdown">倒计时</router-link>
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "App"
};
</script>

4. 在 main.js 中定义路由：

import Vue from "vue";
import App from "./App.vue";
import VueRouter from "vue-router";
import Countdown from "./components/Countdown.vue";

Vue.use(VueRouter);

const routes = [
  { path: "/countdown", component: Countdown }
];

const router = new VueRouter({
  routes
});

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

5. 运行项目，在首页点击“倒计时”链接即可进入倒计时页。