Vue单页应用导航管理器（使用vue-page-stack仿原生app切换效果）

需求描述

在开发移动端web的时候需要针对页面切换实现仿原生app的切换效果，就是在页面前进和后退时对应页面进行左滑和右滑

安装

npm install vue-page-stack --save

全局引入

import Vue from 'vue'
//vue-router配置文件
import router from '@/router'
import VuePageStack from 'vue-page-stack'
//router 路由配置
//name 当前VuePageStack组件name命名，引用组件按照这个name来设定
//keyName 当前router的params值，keyName获取需要keyName + '-dir'，例this.$route.params["stack-key-1-dir"]
Vue.use(VuePageStack, { router: router,name: 'VuePageStack', keyName: 'stack-key-1' })

基本使用

App.vue

<template>
  <div id="app">
    <div class="app-content">
      <transition :name="transitionName">
        <vue-page-stack>
          <router-view class="router-view-c"></router-view>
        </vue-page-stack>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data () {
    return {
      showApp: false,
      transitionName: "forward"
    };
  },
  watch: {
    $route (to, from) {
      //主要用于移动端的前进/后退时的切换效果，模仿原生的切换，左滑/右滑
      if (to.params["stack-key-1-dir"] === "forward") {
        this.transitionName = "forward"
      } else {
        this.transitionName = "back"
      }
    }
  }
};
</script>

<style lang="scss" scoped>
body {
  //ios 微信禁止调整字体大小
  -webkit-text-size-adjust: 100% !important;
}
#app {
  position: absolute;
  width: 100%;
  min-height: 100%;
  background-color: #efeff4; /*app背景色*/
  font-family: "Avenir", "PingFangSC-Regular", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.app-content {
  -webkit-overflow-scrolling: touch;
  overflow: auto;
  position: absolute;
  width: 100%;
  height: 100%;
}

.router-view-c {
  position: absolute;
  transition: opacity 0.5s, transform 0.5s;
  width: 100%;
}

.forward-enter,
.back-leave-active {
  opacity: 0.5;
  transform: translateX(100%);
}

.forward-leave-active,
.back-enter {
  opacity: 0.5;
  transform: translateX(-100%);
}
</style>