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

我們提供的服務(wù)有：成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計(jì)、微信公眾號(hào)開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認(rèn)證、鳳城ssl等。為成百上千家企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務(wù)，是有科學(xué)管理、有技術(shù)的鳳城網(wǎng)站制作公司

為什么要使用Vue

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

實(shí)現(xiàn)原理, vue的過渡 & 動(dòng)畫

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

解決思路

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

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

監(jiān)聽popstate事件

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

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

{
   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è)置不同的動(dòng)畫效果(通過給transtion內(nèi)置組件不同的name選項(xiàng))

方案

路由注冊(cè)

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

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

<template>
 <div id="project">
   <!-- 
   <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
   這種情況下, 
   :include: 因?yàn)槿羰鞘褂胻ransition包裹兩個(gè)keep-alive, vue會(huì)出現(xiàn)報(bào)錯(cuò)
        用兩個(gè)transition分別包裹keep-alive, 會(huì)讓transition的動(dòng)畫name出現(xiàn)問題
 --> 
  <transition :name="transitionName">
   <keep-alive :include="cachedViews">
    <router-view :key="1"></router-view>
   </keep-alive>
  </transition>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
   transitionName: "slide-right", // 初始過渡動(dòng)畫方向
   cachedViews: [] // 緩存組件
  };
 },
 components: {},
 created() {},
 watch: {
  $route(to, from) {
   if (to.meta.keepAlive && !this.cachedViews.includes(to.name)) {
    // 將需要緩存的組件信息, 添加進(jìn)其中, 其中to.name的值應(yīng)該和匹配組件的name選項(xiàng)一致
    this.cachedViews.push(to.name);
   }
   //如果to索引大于from索引,判斷為前進(jìn)狀態(tài),反之則為后退狀態(tài)
   if (to.meta.index > from.meta.index) {
    //設(shè)置動(dòng)畫名稱
    this.transitionName = "slide-left";
   } else {
    this.transitionName = "slide-right";
   }
  }
 },
 methods: {}
};
</script>


<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 <!-- 
  這個(gè)是必須的, 是為了讓頁面脫離文檔流, 不然的話, 后進(jìn)入的頁面會(huì)從頁面底部出來
  這個(gè)定位會(huì)直接添加到路由匹配的組件根元素上, 所以頁面根組件最好設(shè)定其寬度為100vw
 -->
 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);
}
</style>

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

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

當(dāng)前標(biāo)題：使用vue怎么實(shí)現(xiàn)一個(gè)頁面切換項(xiàng)目-創(chuàng)新互聯(lián)
文章地址：http://jinyejixie.com/article30/disepo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、定制開發(fā)、用戶體驗(yàn)、電子商務(wù)、關(guān)鍵詞優(yōu)化、App設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)