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

2019-11-19 17:37:58

字体：大中小

来源：转载

供稿：网友

前言

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.js使用总结

下一篇：jquery使用EasyUI Tree异步加载JSON数据（生成树）