Vue-Router实现页面正在加载特效方法示例
前言
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
如果你在使用Vue.js和Vue-Router开发单页面应用。因为每个页面都是一个Vue组件，你需要从服务器端请求数据，然后再让Vue引擎来渲染到页面上。
例如，这里有个用户个人资料的页面。
user.vue文件如下：
<template>
<div>
<h2v-text="user.name"></h2>
<pv-text="user.description"></p>
</div>
</template>
<script>
exportdefault{
data(){
return{
user:{}
}
}
}
</script>
在动画过渡期间向服务器请求数据，如下：
<script>
exportdefault{
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等。
<divv-if="$loadingRouteData"> <divclass="white-widgetgrey-bgauthor-area"> <divclass="auth-inforow"> <divclass="timeline-wrapper"> <divclass="timeline-item"> <divclass="animated-background"> <divclass="background-maskerheader-top"></div> <divclass="background-maskerheader-left"></div> <divclass="background-maskerheader-right"></div> <divclass="background-maskerheader-bottom"></div> <divclass="background-maskersubheader-left"></div> <divclass="background-maskersubheader-right"></div> <divclass="background-maskersubheader-bottom"></div> </div> </div> </div> </div> </div> </div> <divv-if="!$loadingRouteData"> <div> <h2v-text="user.name"></h2> <pv-text="user.description"></p> </div> </div>
比如，正在加载的样式代码如下：
.timeline-item{
background:#fff;
border-bottom:1pxsolid#f2f2f2;
padding:25px;
margin:0auto;
}
@keyframesplaceHolderShimmer{
0%{
background-position:-468px0
}
100%{
background-position:468px0
}
}
.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(toright,#eeeeee8%,#dddddd18%,#eeeeee33%);
background-size:800px104px;
height:40px;
position:relative;
}
.background-masker{
background:#fff;
position:absolute;
}
/*Everythingbelowthisisjustpositioning*/
.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开发者的要求。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。