前端vue设置动态页面title，离开页面和回到页面监听

在src\router\index.ts里

router.beforeEach((to: any, from, next) => {
  document.title = to.meta.title;
  let timer: any;
  document.addEventListener('visibilitychange', function () {
    // 用户息屏、或者切到后台运行 （离开页面） 
    if (document.visibilityState === 'hidden') {
      clearTimeout(timer)
      const arr: Array<string> = [
        'ヾ(￣▽￣)Bye~Bye~',
        '=͟͟͞͞(꒪⌓꒪*)你咋走了',
        '(；′⌒`)记得回来',
        '‎(,,•́ . •̀,,)记得回来',
        '‎(●︎˘͈ ᵕ˘͈)在等你哦',
        '(づ ●─● )づ你别走呀',
        '(ง •̀_•́)ง我在这里',
        '<(｀^´)快点回来',
      ]
      document.title = arr[Math.ceil(Math.random() * 7)]
    }
    // 用户打开或回到页面 
    if (document.visibilityState === 'visible') {
      clearTimeout(timer)
      const arr: Array<string> = [
        '⁄(⁄ ⁄•⁄ω⁄•⁄ ⁄)⁄你回来辣',
        '(✿◡‿◡)你回来辣',
        '✧ʕ̢̣̣̣̣̩̩̩̩·͡˔·ོɁ̡̣̣̣̣̩̩̩̩✧你回来辣',
        '‎₍˄·͈༝·͈˄₎◞你回来辣',
        '(๑>؂<๑)你回来辣',
        '(づ ●─● )づ你回来辣',
        '(ง •̀_•́)ง你回来辣',
        'ᴗ͈ˬᴗ͈ෆ你回来辣',
        '꒰ᐢ⸝⸝•༝•⸝⸝ᐢ꒱你回来辣',
      ]
      document.title = arr[Math.ceil(Math.random() * 8)]
      timer = setTimeout(() => {
        document.title = to.meta.title
      }, 5000)
    }
  })


  next();
});