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 开发者的要求。