vue swiper跳转外部链接再返回时轮播停止解决参考

  公司前端小妹使用vue-awesome-swiper做中奖弹幕，但在活动主页跳转到外部链接再返回时轮播停止。。。作为PM的我只能查资料帮忙解决了，无奈vue似乎在国外不是很热，面向Google无法解决，只能另辟蹊径了，从浏览器的事件入手。
  主要思路是：监听浏览器页面展示事件onpageshow（当然可能会有兼容问题），触发时激活swiper离开时的下一个轮播。打印swiper的slideNext函数，发现有一个参数animating为false时才可生效，没深入研究，设置为false即可成功触发。也尝试过swiper.update/swiper.autoplay.start但都没正常触发，swiper.slideTo(具体轮播页index)可以生效但是看起来突然滚到某一个会让人感到很突兀，本来打算swiper.slideTo(swiper.activeIndex)这样，但是swiper.activeIndex是个数字却识别不了，直接写数字却可以，不是专业前端，神奇现象就让他神奇吧。
贴出代码吧。
vue-awesome-swiper版本:4.1.1
(用3.1.3也可以，不过把main.js和App.vue中的import 'swiper/css/swiper.css' 改成 import 'swiper/dist/css/swiper.css'，
main.js中的this.$refs.mySwiper.$swiper 改成 this.$refs.mySwiper.swiper;)
package.json

{
  "name": "sw",
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "han",
  "license": "MIT",
  "private": true,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "swiper": "^5.4.1",
    "vue": "^2.5.11",
    "vue-awesome-swiper": "^4.1.1"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^3.5.3",
    "file-loader": "^1.1.4",
    "node-sass": "^4.5.3",
    "sass-loader": "^6.0.6",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.11",
    "webpack-dev-server": "^3.11.0"
  }
}

main.js

import Vue from 'vue'
import App from './App.vue'
import VueAwesomeSwiper from 'vue-awesome-swiper'
// import style
import 'swiper/css/swiper.css'
Vue.use(VueAwesomeSwiper)

new Vue({
  el: '#app',
  render: h => h(App)
})

App.vue

<template>
  <div id="app" class="swiper-no-swiping">
    <swiper class="swiper" :options="swiperOption" ref="mySwiper">
      <swiper-slide>Slide 1</swiper-slide>
      <swiper-slide>Slide 2</swiper-slide>
      <swiper-slide>Slide 3</swiper-slide>
      <swiper-slide>Slide 4</swiper-slide>
      <swiper-slide>Slide 5</swiper-slide>
      <swiper-slide>Slide 6</swiper-slide>
      <swiper-slide>Slide 7</swiper-slide>
      <swiper-slide>Slide 8</swiper-slide>
      <swiper-slide>Slide 9</swiper-slide>
      <swiper-slide>Slide 10</swiper-slide>
    </swiper>
    <a class="a-style" @click="linkGoTo('http://www.google.com.hk')">Google</a>
  </div>
</template>

<script>
import 'swiper/css/swiper.css';
import { Swiper, SwiperSlide } from "vue-awesome-swiper";

export default {
  name: "swiper-example-vertical",
  title: "Vertical slider",
  components: {
    Swiper,
    SwiperSlide
  },
  methods: {
    linkGoTo(url) {
      window.open(url, "_self");
    }
  },
  data() {
    return {
      swiperOption: {
        direction: "vertical",
        loop: true,
        // autoplay: false,
        // 自动播放
        autoplay: {
          delay: 300,
          disableOnInteraction: false
        },
        // 设置轮播
        effect: "fadeEffect",
        //滑动速度
        // speed: 500,
        loopedSlides: 3,
        slidesPerView: 3,
        observer: true,
        observeParents: true
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  mounted: function() {
    window.onpageshow = function(event) {
      // console.log('page show')
      // console.log(this.swiper.slideNext);
      if (event.persisted) {
        if (this.swiper) {
          this.swiper.animating = false;
          this.swiper.slideNext();
        }
      }
    }.bind(this);
  }
};
</script>
<style lang="scss">
.swiper {
  height: 300px;
  width: 100%;
}
.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  background-color: white;
}
.a-style {
  color: #0500ee;
  cursor: pointer;
  text-decoration: underline;
}
.swiper__content {
  height: 300px;
  width: 100%;
}
.swiper__content-item {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-weight: bold;
  font-size: 15px;
  background-color: white;
}
</style>

效果图：

swiper.gif