yarn add html2canvas -D

import html2canvas from 'html2canvas';

// 把页面生成为base64图
html2canvas(document.body).then((canvas) => {
  const base64Image = canvas.toDataURL('image/png');
  console.log(`转换出的base64图为：${base64Image}`);
});

canvas.toDataURL('image/jpeg', 0.3) // 在指定图片格式为 image/jpeg 或 image/webp的情况下，可以从 0 到 1 的区间内选择图片的质量

// 静默登录时，传给state的前端url参数，后边加了一个参数"?isLogin=true" 添加了这个参数，同时也解决了另一个静默登录遇到的坑，后续会讲到。
// const stateUrl = encodeURIComponent('http://www.demo1.com/?isLogin=true#/pageA');
// 连接如： `https://open.weixin.qq.com/connect/oauth2/authorize?appid=[企业号appId]&redirect_uri=[后台回调url]&response_type=code&scope=snsapi_base&state=${stateUrl}#wechat_redirect`

Vue.beforeEach((to, from, next) => {
  if (!window.localStorage) {
    next();
  }
  const prevUrl = localStorage.getItem('prevUrl');
  if (prevUrl) { // 假如存在这个参数，说明是从静默登录成功后的页面跳回来的。即这里，判断为是从B页面跳回来的。
    localStorage.removeItem('prevUrl');
    next({ // 跳回静默登录成功后的页面，这里指的即是跳回到B页面。
      path: `${prevUrl.split('#')[1]}`,
      query: {
        cache: false
      }
    });
  }
  if (/\?isLogin=true/g.test(location.href)) {
    localStorage.setItem('prevUrl', `${location.hash.split('?')[0]}`); // 添加这prevUrl参数用于判断是否存在是从B跳到A的，相当于保存了B页面的连接，即静默登录成功后进入的页面连接。
    history.go(-2); // 回退到A页面
  }
  next();
})

  const feUrl = 'http://www.demo1.com/?isLogin=true#/pageA'; // 前端地址
  const authCallbackUrl = `${apiSourceDomain}/wechat/zlAuthCallback.jhtml?redirectUrl=${encodeURIComponent(state)}`; // 后端地址
  location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=[企业号appId]&redirect_uri=${authCallbackUrl}&response_type=code&scope=snsapi_base&state=${stateUrl}#wechat_redirect`); //发起微信静默登录

const feUrl = encodeURIComponent('http://www.demo1.com/?isLogin=true#/pageA');
location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=[企业号appId]&redirect_uri=[后台回调url]&response_type=code&scope=snsapi_base&state=${feUrl}#wechat_redirect`);

// <transition :name="transitionName"> 
//  <router-view @click.native="onClick" v-swipe="{fn:onSwipe, trigger: 'touchstart'}" ></router-view>
//</transition>

export default {
  data: {
    return {
      routeMap: {
        count: 0,
        '/': 0,
      },
      transitionName: '',
      touchHandler: null,
    }
  }
  watch: {
    $route(to, from) {
      // 切换路由，判断是前进页面，或后退页面，相应改变 this.transitionName = 'next'; 
      // 或 this.transitionName = 'prev'; 

      const toIndex = this.routeMap[to.path];
      const fromIndex = this.routeMap[from.path];
      if (toIndex !== undefined) {
        if (!fromIndex || parseInt(toIndex, 10) > parseInt(fromIndex, 10)) {
          this.transitionName = 'next';
        } else {
          this.transitionName = 'prev';
        }
      } else {
        this.routeMap.count += 2;
        this.routeMap[to.path] = this.routeMap.count;
        // 第一个页面不需要动画，因为每个子路由的from都是根路由（即使你第一个访问的是子路由）
        if (from.path !== '/') {
          this.transitionName = 'next';
        }
      }
      // 清除掉自定义动画
      this.touchHandler && this.touchHandler();
    }
  }
  methods: {
    ...
    // 监听点击事件
    onClick() {
      this.touchHandler = null; // 恢复自定义动画
    },
    //监听向左向右滑动，和touchstart事件
    onSwipe() { // 解决ios系统版本在11.0以上，滑动会执行原生动画和vue自定义动画冲突问题
      if (Device.isIOS() && (Device.iosVersionCompare('11.0') !== -1)) { // 大于11.0
        this.touchHandler = () => {
          this.transitionName = ''; // 清除掉自定义动画
        };
        this.Timer && clearTimeout(this.Timer);
        this.Timer = setTimeout(() => { // 恢复自定义动画
          this.touchHandler = null;
        }, 2000);
      }
    },
    ...
  }
}