這篇文章主要介紹了使用vue怎么實現(xiàn)一個頁面切換項目，此處通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考價值，需要的朋友可以參考下：

雨山網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)建站,雨山網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為雨山上1000家提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的雨山做網(wǎng)站的公司定做！

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測試性更強(qiáng)的代碼庫，Vue允許可以將一個網(wǎng)頁分割成可復(fù)用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網(wǎng)頁中相應(yīng)的地方，所以越來越多的前端開發(fā)者使用vue。

實現(xiàn)原理, vue的過渡 & 動畫

技術(shù)棧: vue + vue-router

解決思路

區(qū)分前進(jìn) 和 后退的路由

網(wǎng)上搜索的資料, 找到了兩種

監(jiān)聽popstate事件

window.addEventListener('popstate', function (e) {
  // 用來判斷是否是后退, 在判斷后需要在其他地方重置
  router.isBack = true
},false)

在注冊路由的時, 添加 meta對象 ( 路由元信息)中添加索引, 這樣做就需要注意索引的大小(這里使用這一種方式)

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登錄",
    keepAlive: false,
    index: 1
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前進(jìn)",
    keepAlive: true,
    index: 2
   }
  },

根據(jù)切換方向設(shè)置不同的動畫效果(通過給transtion內(nèi)置組件不同的name選項)

方案

路由注冊

 {
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "登錄",
    keepAlive: false, // 用來判斷是否緩存, 當(dāng)判斷為緩存時, 則路由信息的name和組件的name選項需一致
    index: 1, // 通過比較不同的索引, 來判斷是前進(jìn)動畫還是后退動畫
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "前進(jìn)",
    keepAlive: true,
    index: 2
   }
  },

在App.vue(根組件)中, 判斷動畫方向

.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 
 width: 100vw;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}

到此這篇關(guān)于使用vue怎么實現(xiàn)一個頁面切換項目的文章就介紹到這了,更多相關(guān)使用vue怎么實現(xiàn)一個頁面切換項目的內(nèi)容請搜索創(chuàng)新互聯(lián)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持創(chuàng)新互聯(lián)！