La page d'implémentation de Vue-Router charge un exemple de méthode d'effets spéciaux

Cet article vous présente principalement l'exemple d'utilisation de Vue-Router pour réaliser l'effet spécial de chargement de page. L'article donne un exemple de code détaillé. Je pense qu'il a une certaine valeur de référence pour tous les amis dans le besoin. Jetez un oeil.

Avant-propos

vue-router est le plug-in de routage officiel de Vue.js. Il est profondément intégré à vue.js et convient à la création d'une seule page. candidatures. L'application monopage de Vue est basée sur le routage et les composants. Le routage est utilisé pour définir les chemins d'accès et cartographier les chemins et les composants. Les applications de pages traditionnelles utilisent certains hyperliens pour effectuer des changements de page et des sauts. Dans l'application monopage vue-router, il s'agit de la commutation entre les chemins, c'est-à-dire la commutation de composants.

Si vous utilisez Vue.js et Vue-Router pour développer une application monopage. Étant donné que chaque page est un composant Vue, vous devez demander des données au serveur, puis laisser le moteur Vue les restituer sur la page.

Par exemple, voici une page de profil utilisateur.

Le fichier user.vue est le suivant :

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

Demander des données au serveur pendant la transition d'animation comme suit :

<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>

De cette façon, nous pouvons accéder à la variable $loadingRouteData. Vous pouvez masquer tous les éléments de la page et afficher un élément de chargement, comme un 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>

Par exemple, le code de style en cours de chargement est le suivant :

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

De cette façon, vous avez l'effet de Vue-Router lors de son chargement. Vous pouvez écrire le code ci-dessus dans un composant distinct et le référencer partout où vous l'utilisez.

Enfin

Ceci n'est qu'un simple tutoriel sur les composants chargés par Vue-Router. En fait, il peut être amélioré à de nombreux endroits,

VueJobs.com

Si vous êtes un ingénieur front-end intéressé par Vue.js, vous pouvez parcourir ce site Web pour en savoir plus sur les exigences étrangères pour les développeurs Vue.

Pour plus de pages d'implémentation de Vue-Router, les exemples de méthodes d'effets spéciaux sont en cours de chargement. Pour les articles connexes, veuillez faire attention au site Web PHP chinois !