可滑动菜单，并返回该页面后菜单滑动到选中的指定位置

<template>
  <div class="wrapper homebody"> 
      <swiper ref="swiper" :options="swiperOption" class="top-swiper">
        <swiper-slide :class="{'banner-item': true, 'active': active == index}" v-for="(item, index) in tabList" :key="index">
          <div>
            <p :class="'icon '+ item.icon"></p>
            {{item.name}}
          </div>
        </swiper-slide>
      </swiper>  
  </div>
</template>

<script>  
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import 'swiper/css/swiper.css'; 
export default {
  components: {
    Swiper,
    SwiperSlide
  }, 
  watch: {
    $route: {
      deep: true,
      immediate: true,
      handler(val) {  
          this.tabList.forEach((k, i) => {
            if (val.name == k.path) {
              // 路由发生变化，下面的菜单选中也变化
              this.active = i 
              this.$nextTick(() => { 
                this.$refs.swiper.$swiper.slideTo(i, 1000, false);//切换到第一个slide，速度为1秒
              })
            }
          }) 
      },
    },
  },
  data() {
    return { 
      active: 0, 
      tabList: [
        {
          icon: "icon-list",
          path: "index",
          name: "列表"
        },
        {
          icon: "icon-statis",
          path: "historySearch",
          name: "统计"
        },
        {
          icon: "icon-wxj",
          path: "notInspected",
          name: "历史未巡检"
        },
        {
          icon: "icon-wzsg",
          path: "unlicensedConstru",
          name: "无证施工"
        },
        {
          icon: "icon-wzsg",
          path: "construcStatis",
          name: "施工统计"
        }
      ],
      swiperOption: {
        slidesPerView: 3,  //设置能够同时显示的数量（可设置 auto） 
        autoplay: false, //是否开启自动轮播    
        // loop: true,
        on: {
          tap: (swiper,) => {
            console.log("tap", swiper)
            let text = swiper.target.innerText;
            this.swpierHandle(text)
          },

        }
      }
    }
  },
  mounted() { 
  },
  methods: { 
    swpierHandle(path) {
      this.tabList.forEach((item, index) => {
        if (path == item.name) {
          this.active = index
          this.$router.push({
            name: item.path
          });
        }
      })
    }, 
  }
}
</script>

<style lang='css' scoped>
 
</style>