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>

另外有需要云服務器可以了解下創新互聯scvps.cn，海內外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案，具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢，專為企業上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

標題名稱：vue路由組件左右切換（兼聽手機返回鍵或自寫按鈕）-創新互聯
轉載來于：http://m.kartarina.com/article36/dcjhpg.html

成都網站建設公司_創新互聯，為您提供營銷型網站建設、網站改版、定制開發、App開發、微信公眾號、品牌網站制作

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源：創新互聯

猜你還喜歡下面的內容