蝙蝠岛资源网

Vue-Router实现页面正在加载特效方法示例
网络编程 2025/10/31 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

前言

vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，适合用于构建单页面应用。vue的单页面应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。传统的页面应用，是用一些超链接来实现页面切换和跳转的。在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 开发者的要求。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流。

标签：
vue,router,加载,vue,router,加载动画,vue,router,加载,html
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“Vue-Router实现页面正在加载特效方法示例”

暂无Vue-Router实现页面正在加载特效方法示例的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 MicroAirGrinder 南强小屋 幽灵资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 HerbalExtract 蝙蝠岛资源网 白云城资源网 天枫庄资源网 无争山庄资源网 HerbalExtracts FoodColouring NaturalHerbal HerbalOnline NaturalColouring 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com