[JavaScript知识库]vue如何实现从00:00:00:00开始计时，以及再次进入显示之前的历史时间（即返回需要保留数据），并继续计时

html

<span id="txt">{{txt}}</span>
<input @click="start()" type="button" value="开始">
<input @click="stop()" type="button" value="暂停"> 
<input @click="reset()" type="button" value="重置"> 

js

data () {
  return { 
    timer: null,
    count: 0,
    clickStart: 0,
    txt: '00:00:00:00'
  }
},

methods: {
  // 计时
  start () { // 开始
    this.clickStart++
    if (this.clickStart % 2 === 0) {
      clearInterval(this.timer)
      this.clickStart = 0
    } else {
      this.timer = setInterval(() => {
      let h = parseInt(this.count / 1000 / 60 / 60)
      let m = parseInt(this.count / 1000 / 60) % 60
      let s = parseInt(this.count / 1000) % 60
      let ms = parseInt(this.count / 10) % 100
      h = h < 10 ? '0' + h : h
      m = m < 10 ? '0' + m : m
      s = s < 10 ? '0' + s : s
      ms = ms < 10 ? '0' + ms : ms
      this.txt = h + ':' + m + ':' + s + ':' + ms
      this.count += 10
      }, 10)
    }
  },
  stop () { // 暂停
    window.clearInterval(this.timer)
  },
  reset () { // 重置
    this.count = 0
    this.clickStart = 0
    clearInterval(this.timer)
    this.txt = '00:00:00:00'
  },
}

app.vue中加入keep-alive组件标签，作用于全局

当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated

<keep-alive>
  <router-view v-if="$route.meta.keepAlive" style="min-height:100%"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive" style="min-height:100%"></router-view>

router.js下的meta中加上 keepAlive 为 ‘true’ 或 ‘false’

//不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签
//需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签

{
    path: '/englishTest',
    name: 'englishTest',
    component: resolve => require(['@/views/home/EnglishTest'], resolve),
    meta: {
      title: '英语练习',
      keepAlive: true // 需要缓存
    }
},

? ? 希望我的愚见能够帮助你哦~，若有不足之处，还望指出，你们有更好的解决方法，欢迎大家在评论区下方留言支持，大家一起相互学习参考呀~