Vue-Router 頁面正在加載特效

Vue-Router 頁面正在加載特效

如果你在使用 Vue.js 和 Vue-Router 開發單頁面應用。因為每個頁面都是一個 Vue 組件，你需要從服務器端請求數據，然后再讓 Vue 引擎來渲染到頁面上。

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

user.vue 文件如下：

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

在動畫過渡期間向服務器請求數據，如下：

<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。就可以實現隱藏所有的頁面元素，顯示某個正在加載的元素，比如某個 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>
        <h2 v-text="user.name"></h2>
        <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 的正在加載時候的效果了。你可以把以上代碼寫進到一個單獨的組件內，在你用的地方引用它就行。

最后

這僅是個關於 Vue-Router 加載的組件的簡單教程，實際上可以在許多地方來進行改進，

VueJobs.com

如果你是一位對 Vue.js 感興趣的前端工程師，可去這個網上瀏覽下，了解下國外對 Vue 開發者的要求。