溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

vue路由組件左右切換(兼聽(tīng)手機(jī)返回鍵或自寫(xiě)按鈕)

發(fā)布時(shí)間:2020-07-05 05:42:06 來(lái)源:網(wǎng)絡(luò) 閱讀:3743 作者:任倩坤 欄目:web開(kāi)發(fā)

示例 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項(xiàng)目 使用webpack模板,項(xiàng)目名稱(chēng)(自帶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>
向AI問(wèn)一下細(xì)節(jié)

免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI