Vue-Router implementation page is loading special effects method example

This article mainly introduces you to the example of using Vue-Router to realize the page loading special effect. The article gives detailed example code. I believe it has certain reference value for everyone. Friends in need can take a look below. Take a look.

Preface

vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, it is switching between paths, that is, switching of components.

If you are using Vue.js and Vue-Router to develop a single-page application. Because each page is a Vue component, you need to request data from the server and then let the Vue engine render it to the page.

For example, here is a user profile page.

The user.vue file is as follows:

<template>
 <p>
  <h2 v-text="user.name"></h2>
  <p v-text="user.description"></p>
 </p>
</template>
<script>
 export default{
  data(){
   return{
    user: {}
   }
  }
 }
</script>

Request data from the server during the animation transition, as follows:

<script>
export default{
 data(){
  return{
   user: {}
  }
 },
 route: {
  data: function (transition) {
   this.getUserDetails(transition);
  }
 },
 methods: {
  getUserDetails(transition)
  {
   this.$http.get(&#39;/users/&#39; + this.$route.params.userName)
    .then(function (response) {
     this.user = response.data;
     transition.next();
    });
  }
 }
}
</script>

In this way, we can access the variable $loadingRouteData. You can hide all page elements and display a loading element, such as a logo, etc.

<p v-if="$loadingRouteData">
 <p class="white-widget grey-bg author-area">
 <p class="auth-info row">
 <p class="timeline-wrapper">
 <p class="timeline-item">
  <p class="animated-background">
   <p class="background-masker header-top"></p>
   <p class="background-masker header-left"></p>
   <p class="background-masker header-right"></p>
   <p class="background-masker header-bottom"></p>
   <p class="background-masker subheader-left"></p>
   <p class="background-masker subheader-right"></p>
   <p class="background-masker subheader-bottom"></p>
  </p>
 </p>
 </p>
 </p>
 </p>
</p>
<p v-if="!$loadingRouteData">
 <p>
  <h2 v-text="user.name"></h2>
  <p v-text="user.description"></p>
 </p>
</p>

For example, the style code being loaded is as follows:

.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;
}

In this way, you There is the effect of Vue-Router when it is loading. You can write the above code into a separate component and reference it wherever you use it.

Finally

This is just a simple tutorial about the components loaded by Vue-Router. In fact, it can be improved in many places,

VueJobs.com

If you are a front-end engineer interested in Vue.js, you can browse this website to learn about foreign requirements for Vue developers.

For more Vue-Router implementation pages, the special effects method examples are loading. For related articles, please pay attention to the PHP Chinese website!