起因

在使用Vue开发单页面应用程序的时候，希望能实现左右滑动来实现tab的切换。

由于未能找到现成的实现，决定自己写一个。

思路

关键思路：使用touch事件，在触发事件时，push路由，同时使用Vue的动画过渡效果，最终实现目的。

工具

Vue下有封装好的touch事件插件–vue-touch。此文写下时，该插件还未支持Vue2.0，但可以使用vue-touch@next版本。

使用了Vuex来管理routerIndex。因为如果没有一个索引来标识路由的话，在点击tab实现跳转后，再使用滑动来跳转时，取得路由状态有点麻烦，所以索性使用Vuex来管理状态，这样在app.vue以及tab.vue下都可以随时取得路由索引。

实现

在线地址

<template>
  <div id="app">
    <m-header></m-header>
    <tab></tab>
    <v-touch @swipeleft="goRight" @swiperight="goLeft">
      <transition name="slide-fade">
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </v-touch>
    <player></player>
  </div>
</template>

import Vue from 'vue'
import MHeader from 'components/m-header/m-header'
import Tab from 'components/tab/tab'
import Player from 'components/player/player'
import VueTouch from 'vue-touch'
import router from './router'
import {mapGetters, mapMutations} from 'vuex'

Vue.use(VueTouch, {name: 'v-touch'})

export default {
  data() {
    return {
      transitionName: 'slide-left',
      pathArr: []
    }
  },
  computed: {
    ...mapGetters([
      'currentPathIndex'
    ])
  },
  methods: {
    ...mapMutations({
      setCurrentPathIndex: 'SET_CURRENT_PATH_INDEX'
    }),
    goRight() {
      let pathObj = this.$router.options.routes
      let nextIndex = this.currentPathIndex + 1
      this.setCurrentPathIndex(nextIndex)
      if (nextIndex >= 5) {
        nextIndex = 4
        this.setCurrentPathIndex(4)
      }
      // let currentPath = this.$router.currentRoute.path
      router.push(pathObj[nextIndex])
    },
    goLeft() {
      let pathObj = this.$router.options.routes
      let nextIndex = this.currentPathIndex - 1
      this.setCurrentPathIndex(nextIndex)
      if (nextIndex <= 1) {
        nextIndex = 1
        this.setCurrentPathIndex(1)
      }
      router.push(pathObj[nextIndex])
    }
  },
  components: {
    MHeader,
    Tab,
    Player
  }
}

  .slide-fade-enter-active
    transition all .3s ease
  .slide-fade-leave-active
    transition all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0)
  .slide-fade-enter, .slide-fade-leave-to
    transform translateX(10px)
    opacity 0

<v-touch>标签包裹router-view, 在触发v-touch的swipeleft以及swipeRight事件时，添加对应的回调函数来实现路由的切换。

本文参考

作者：hayato
文章版权：本站所有文章版权依赖于 CC BY-NC-SA 3.0 Unported License
本文链接：https://blog.axis-studio.org/2017/11/19/Vue下左右滑动切换路由的思路与实现/