Vue-Routerインプリメンテーションページが特効メソッドをロードしている例

5661 ワード

前言
vue-routerはVueです.js公式のルーティングプラグイン、vue.jsは深さ統合されており、単一ページアプリケーションの構築に適しています.vueの単一ページアプリケーションは、アクセスパスを設定し、パスとコンポーネントをマッピングするためのルーティングとコンポーネントに基づいている.従来のページアプリケーションでは、いくつかのハイパーリンクでページの切り替えとジャンプを実現しています.vue-router単一ページアプリケーションでは、パス間の切り替え、すなわちコンポーネントの切り替えです.
Vueを使っているならjsとVue-Routerは単一ページアプリケーションを開発した.各ページはVueコンポーネントなので、サーバ側からデータを要求してから、Vueエンジンでページにレンダリングする必要があります.
たとえば、ここにユーザーの個人情報のページがあります.
user.vueファイルは次のとおりです.




 export default{
  data(){
   return{
    user: {}
   }
  }
 }

次のように、アニメーションの移行中にサーバにデータを要求します.



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();
    });
  }
 }
}

これにより、変数$loadingRouteDataにアクセスできます.すべてのページ要素を非表示にし、logoなどのロード中の要素を表示することができます.

比如，正在加载的样式代码如下：


.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におけるkeepAliveの注意事項

vueプロジェクトのホワイトスクリーンの問題のまとめ、マルチソリューションの詳細な解決