vue路由组件左右切换

示例 http://47.94.90.89/dist

1 安装vue-cli

（1）   下载安装node.js

（1）  npm install -g cnpm --registry=https://registry.npm.taobao.org 换源

（1）   cnpm install -g vue-cli  全局安装vue-cli  已安装则不用

（1）    vue init webpack Vue-Project  初始化vue项目 使用webpack模板，项目名称（自带webpack）

（1）     cnpm install   初始化 生成node_modules

（1）    npm run dev    
需要上线打包为  npm run build
2  配置路由  （router 目录>index.js）

import  ccc from '@/components/ccc'

Router.prototype.go = function (a) {   sessionStorage.isBack = true  if(a){    window.history.go(a)  }else{    window.history.go(-1)  }}window.addEventListener("popstate", function(e) {  sessionStorage.isBack = true}, false);

Vue.use(Router)
3 app.vue中
（1）```
<transition :name="transitionName" >
<router-view class="child-view" ></router-view>
</transition>
</div>

（2）<script>export default {  name: 'App',  data () {    return {      transitionName:'slide-left'    }  },  watch: {    '$route' (to, from) {      let isBack = eval(sessionStorage.isBack)      if (isBack) {        this.transitionName = 'slide-right'      } else {        this.transitionName = '  slide-left'      }      console.log(sessionStorage.isBack);      sessionStorage.isBack = false    }  },}</script><style>  *{    margin: 0 ;    padding: 0;  }  body,html{    width: 100%;    height: 100%;  }#app {  font-family: 'Avenir', Helvetica, Arial, sans-serif;  width: 100%;  height: 100%;  text-align: center;  max-width: 750px;  margin: 0 auto;  overflow-x: hidden;  position: relative;}  .child-view {    transition:all .3s ease;    position: absolute;    width: 100%;  }  .slide-left-enter,.slide-right-leave-active {    opacity:0;    -webkit-transform:translate(100%,0);    transform:translate(100%,0);  }  .slide-left-leave-active,.slide-right-enter {    opacity:0;    -webkit-transform:translate(-100%,0);    transform:translate(-100%,0);  }</style>