溫馨提示×

您好，登錄后才能下訂單哦！

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

Vue-Router實(shí)現(xiàn)頁面正在加載特效方法示例

發(fā)布時(shí)間：2020-10-20 08:11:35 來源：腳本之家 閱讀：195 作者：daisy 欄目：web開發(fā)

前言

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構(gòu)建單頁面應(yīng)用。vue的單頁面應(yīng)用是基于路由和組件的，路由用于設(shè)定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應(yīng)用，是用一些超鏈接來實(shí)現(xiàn)頁面切換和跳轉(zhuǎn)的。在vue-router單頁面應(yīng)用中，則是路徑之間的切換，也就是組件的切換。

如果你在使用 Vue.js 和 Vue-Router 開發(fā)單頁面應(yīng)用。因?yàn)槊總€(gè)頁面都是一個(gè) Vue 組件，你需要從服務(wù)器端請(qǐng)求數(shù)據(jù)，然后再讓 Vue 引擎來渲染到頁面上。

例如，這里有個(gè)用戶個(gè)人資料的頁面。

user.vue 文件如下：

<template>
 <div>
  <h3 v-text="user.name"></h3>
  <p v-text="user.description"></p>
 </div>
</template>
<script>
 export default{
  data(){
   return{
    user: {}
   }
  }
 }
</script>

在動(dòng)畫過渡期間向服務(wù)器請(qǐng)求數(shù)據(jù)，如下：

<script>
export default{
 data(){
  return{
   user: {}
  }
 },
 route: {
  data: function (transition) {
   this.getUserDetails(transition);
  }
 },
 methods: {
  getUserDetails(transition)
  {
   this.$http.get('/users/' + this.$route.params.userName)
    .then(function (response) {
     this.user = response.data;
     transition.next();
    });
  }
 }
}
</script>

這樣，我們可以通過訪問變量 $loadingRouteData。就可以實(shí)現(xiàn)隱藏所有的頁面元素，顯示某個(gè)正在加載的元素，比如某個(gè) logo 等。

<div v-if="$loadingRouteData">
 <div class="white-widget grey-bg author-area">
 <div class="auth-info row">
 <div class="timeline-wrapper">
 <div class="timeline-item">
  <div class="animated-background">
   <div class="background-masker header-top"></div>
   <div class="background-masker header-left"></div>
   <div class="background-masker header-right"></div>
   <div class="background-masker header-bottom"></div>
   <div class="background-masker subheader-left"></div>
   <div class="background-masker subheader-right"></div>
   <div class="background-masker subheader-bottom"></div>
  </div>
 </div>
 </div>
 </div>
 </div>
</div>
<div v-if="!$loadingRouteData">
 <div>
  <h3 v-text="user.name"></h3>
  <p v-text="user.description"></p>
 </div>
</div>

比如，正在加載的樣式代碼如下：

.timeline-item {
 background: #fff;
 border-bottom: 1px solid #f2f2f2;
 padding: 25px;
 margin: 0 auto;
}

@keyframes placeHolderShimmer{
 0%{
 background-position: -468px 0
 }
 100%{
 background-position: 468px 0
 }
}

.animated-background {
 animation-duration: 1s;
 animation-fill-mode: forwards;
 animation-iteration-count: infinite;
 animation-name: placeHolderShimmer;
 animation-timing-function: linear;
 background: #f6f7f8;
 background: linear-gradient(to right, #eeeeee 8%, #dddddd 18%, #eeeeee 33%);
 background-size: 800px 104px;
 height: 40px;
 position: relative;
}

.background-masker {
 background: #fff;
 position: absolute;
}

/* Every thing below this is just positioning */

.background-masker.header-top,
.background-masker.header-bottom,
.background-masker.subheader-bottom {
 top: 0;
 left: 40px;
 right: 0;
 height: 10px;
}

.background-masker.header-left,
.background-masker.subheader-left,
.background-masker.header-right,
.background-masker.subheader-right {
 top: 10px;
 left: 40px;
 height: 8px;
 width: 10px;
}

.background-masker.header-bottom {
 top: 18px;
 height: 6px;
}

.background-masker.subheader-left,
.background-masker.subheader-right {
 top: 24px;
 height: 6px;
}


.background-masker.header-right,
.background-masker.subheader-right {
 width: auto;
 left: 300px;
 right: 0;
}

.background-masker.subheader-right {
 left: 230px;
}

.background-masker.subheader-bottom {
 top: 30px;
 height: 10px;
}

.background-masker.content-top,
.background-masker.content-second-line,
.background-masker.content-third-line,
.background-masker.content-second-end,
.background-masker.content-third-end,
.background-masker.content-first-end {
 top: 40px;
 left: 0;
 right: 0;
 height: 6px;
}

.background-masker.content-top {
 height:20px;
}

.background-masker.content-first-end,
.background-masker.content-second-end,
.background-masker.content-third-end{
 width: auto;
 left: 380px;
 right: 0;
 top: 60px;
 height: 8px;
}

.background-masker.content-second-line {
 top: 68px;
}

.background-masker.content-second-end {
 left: 420px;
 top: 74px;
}

.background-masker.content-third-line {
 top: 82px;
}

.background-masker.content-third-end {
 left: 300px;
 top: 88px;
}

這樣，你就有了 Vue-Router 的正在加載時(shí)候的效果了。你可以把以上代碼寫進(jìn)到一個(gè)單獨(dú)的組件內(nèi)，在你用的地方引用它就行。

最后

這僅是個(gè)關(guān)于 Vue-Router 加載的組件的簡單教程，實(shí)際上可以在許多地方來進(jìn)行改進(jìn)，

VueJobs.com

如果你是一位對(duì) Vue.js 感興趣的前端工程師，可去這個(gè)網(wǎng)上瀏覽下，了解下國外對(duì) Vue 開發(fā)者的要求。

好了，以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。

向AI問一下細(xì)節(jié)

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

AI
助
手