前端之家收集整理的这篇文章主要介绍了
Vue-Router实现页面正在加载特效方法示例，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
前言
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在vue-router单页面应用中，则是路径之间的切换，也就是组件的切换。
如果你在使用 Vue.js 和 Vue-Router 开发单页面应用。因为每个页面都是一个 Vue 组件，你需要从服务器端请求数据，然后再让 Vue 引擎来渲染到页面上。
例如，这里有个用户个人资料的页面。
user.vue 文件如下：
在动画过渡期间向服务器请求数据，如下：
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();
});
}
}
}
这样，我们可以通过访问变量 $loadingRouteData。就可以实现隐藏所有的页面元素，显示某个正在加载的元素，比如某个 logo 等。
@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-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;
}
