App.vue 1.67 KB
Newer Older
李晓兵's avatar
李晓兵 committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
<template>
  <div id="app">
    <transition :name="transitionName">
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"/>
      </keep-alive>
    </transition>
    <transition :name="transitionName">
      <router-view v-if="!$route.meta.keepAlive"/>
    </transition>
  </div>
</template>

<script>
export default {
  data () {
    return {
      pathList: [],
      transitionName: 'slide-left',
    }
  },
  watch: { // 监听路由变化
    $route (to, from) {
      if (this.pathList.includes(to.path)) {
        const index = (this.pathList.findIndex(() => {
          return from.path
        }))
        this.pathList.splice(index, 1)
linxin's avatar
linxin committed
29
        this.$router.isBack = 1
李晓兵's avatar
李晓兵 committed
30 31
      } else {
        this.pathList.push(to.path)
linxin's avatar
linxin committed
32
        this.$router.isBack = 2
李晓兵's avatar
李晓兵 committed
33
      }
linxin's avatar
linxin committed
34 35 36
      if (to.path === '/tab/home-page' || to.path === '/tab/my-info' || to.path === '/tab/message-center' || from.path === '/tab/home-page' || from.path === '/tab/my-info' || from.path === '/tab/message-center') {
        this.$router.isBack = 3
        this.transitionName = ''
李晓兵's avatar
李晓兵 committed
37 38
        this.pathList = []
      }
JingChao's avatar
JingChao committed
39
      // let isBack = this.$router.isBack
linxin's avatar
linxin committed
40 41 42 43
      if (to.path !== '/tab/home-page' && to.path !== '/tab/my-info' && to.path !== '/tab/message-center') {
        this.transitionName = 'router-slide-right'
        this.$router.isBack = 2
      }
李晓兵's avatar
李晓兵 committed
44 45 46 47 48 49 50 51 52 53 54
    },
  },
  methods: {
    onSwipeLeft () {
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="less">
JingChao's avatar
JingChao committed
55 56
  @import "styles/variables";
  @import "styles/public-style";
李晓兵's avatar
李晓兵 committed
57 58 59 60 61 62 63 64 65 66

  html, body, #app {
    height: 100%;
    width: 100%;
    overflow-x: hidden;
    //overflow: auto;
    //-webkit-overflow-scrolling: touch;
    //overflow-scrolling: touch;
  }
</style>