<template>
  <div id="app">
    <transition :name="routerAnimate">
      <keep-alive :include="keepAlive">
        <router-view class="app-content"></router-view>
      </keep-alive>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      routerAnimate: '',
      keepAlive: [],
      aliveRoute: ['peopleList']
    }
  },
  watch: {
    // 监听 $route 为内页设置不同的过渡效果
    "$route" (to, from) {

      /*动态设置路由缓存 start*/
      //?需要缓存的组件
      if (this.aliveRoute.includes(to.name)) {
        to.meta.keepAlive = true
      }
      // console.log(to.path + '---' + to.meta.keepAlive);
      let aliveRoute = this.$router.options.routes.filter(e => e.meta && e.meta.keepAlive).map(e => e.name)
      this.keepAlive = aliveRoute
      /*动态设置路由缓存 end*/
      // console.log(aliveRoute);

      if (to.meta.index === from.meta.index) {
        this.routerAnimate = ""
        return;
        // this.routerAnimate = "slide-left"
      }
      //都有值时
      if (to.meta.index && from.meta.index) {
        if (to.meta.index > from.meta.index) {//前进
          this.routerAnimate = "slide-left"
        } else {//后退
          this.routerAnimate = "slide-right"
        }
      }
      // 如果 该路由 在 免登录之外 且 loginFlg 状态为 需要登录 则跳转登录页
      // console.log(this.$store.state.userInfo, '-this.userInfo');

      // if (!this.$normalPage().toString().includes(this.$route.path) && (!this.userInfo.loginFlg || this.userInfo.loginFlg != '1')) {
      //   console.log("检验未通过，走index")
      //   this.$router.push({
      //     path: "/index",
      //   });
      // }
    },
  },
  computed: {
    userInfo () {
      return this.$store.state.userInfo || {}
    },

  },
  methods: {
  },
  created () {

  },

  mounted () {
  }

}
</script>
<style lang="scss">
/*将公用的样式统一在此导入*/
@import './assets/css/base.css';
@import './assets/css/vuex-ui.css';
@import './assets/css/vant-ui.css';
@import './assets/iconfont.css';

html,
body {
  width: 100%;
  height: 100%;
  font-size: 16px;
  //overflow: hidden;
}

html {
  font-size: calc(100vw / 7.5); /*1rem = 100px*/
}

#app {
  height: 100%;
  width: 100%;
}
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
  will-change: transform;
  transition: all 500ms;
  position: absolute;
}
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
  /*opacity: 0;*/
  display: none;
  transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
  opacity: 0;
  transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
  /*opacity: 0;*/
  display: none;
  transform: translate3d(-100%, 0, 0);
}
</style>