备份

flowstocktrading

2022-11-03 2f72cf1a3a30b665619e7fcaa2657e225598554e

 src/App.vue

@@ -13,21 +13,21 @@
    </div>
    <div class="body-box">
      <transition
        :duration="1000"
        mode="out-in"
        appear
        enter-active-class="animated fadeInRight"
        leave-active-class="animated fadeOut"
        appear-active-class="animated zoomInDown"
      :name="transitionName"
      >
        <router-view></router-view>
      </transition>
    </div>
    <foot></foot>
  </div>
</template>

<script>
  import foot from "@/components/foot.vue";
export default {
  components: {
    foot,
    },
  name: "App",
  created() {
    let title = this.$route.meta.title || "首页";
@@ -46,19 +46,26 @@
    // this.$store.state.className = window.localStorage.getItem('styleName')?window.localStorage.getItem('styleName'):'red'
  },
  watch: {
    $route(val) {
      let title = val.meta.title || "首页";
    $route(to, from) {
      let title = to.meta.title || "首页";
      this.title = title;

      if (val.meta.iconRight) {
        this.iconRight = val.meta.iconRight;
      if (to.meta.iconRight) {
        this.iconRight = to.meta.iconRight;
      } else {
        this.iconRight = "default";
      }
      if (val.meta.hasHeader) {
      if (to.meta.hasHeader) {
        this.hasHeader = true;
      } else {
        this.hasHeader = false;
      }
      if (to.meta.index > from.meta.index) {
        console.log("slide-left");
        //设置动画名称
        this.transitionName = "slide-left";
      } else {
        console.log("slide-right");
        this.transitionName = "slide-right";
      }
    }
  },
@@ -66,7 +73,8 @@
    return {
      title: "首页",
      hasHeader: false,
      iconRight: "default"
      iconRight: "default",
      transitionName: ''
    };
  }
};