Vue-Router 実装ページは特殊効果メソッドの例をロードしています

この記事では主に、Vue-Router を使用してページ読み込みの特殊効果を実装する例を紹介します。必要な方はぜひ参考にしてください。

はじめに

vue-router は Vue.js の公式ルーティング プラグインであり、vue.js と緊密に統合されており、シングルページ アプリケーションの構築に適しています。 Vue の単一ページ アプリケーションは、ルーティングとコンポーネントに基づいています。ルーティングは、アクセス パスの設定と、パスとコンポーネントのマップに使用されます。従来のページ アプリケーションは、いくつかのハイパーリンクを使用してページの切り替えとジャンプを実装します。 vue-router シングルページ アプリケーションでは、パス間の切り替え、つまりコンポーネントの切り替えを行っています。

Vue.js と Vue-Router を使用してシングルページ アプリケーションを開発している場合。各ページは Vue コンポーネントであるため、サーバーにデータをリクエストし、Vue エンジンにそのデータをページにレンダリングさせる必要があります。

たとえば、これはユーザープロフィールページです。

user.vue ファイルは次のとおりです:

<template>
 <p>
  <h2 v-text="user.name"></h2>
  <p v-text="user.description"></p>
 </p>
</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(&#39;/users/&#39; + this.$route.params.userName)
    .then(function (response) {
     this.user = response.data;
     transition.next();
    });
  }
 }
}
</script>

この方法で、変数 $loadingRouteData にアクセスできます。すべてのページ要素を非表示にして、ロゴなどの読み込み要素を表示することができます。

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

たとえば、読み込みスタイルのコードは次のとおりです:

.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 によってロードされるコンポーネントに関する単なるチュートリアルです。実際には、多くの場所で改善することができます。Vue.js に興味がある場合は、

VueJobs.com

。興味のあるフロントエンド エンジニアは、この Web サイトを参照して、Vue 開発者向けの外国の要件について学ぶことができます。

その他の Vue-Router 実装ページについては、特殊効果メソッドの例が読み込まれています。関連記事については、PHP 中国語 Web サイトに注目してください。