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가 로드하는 구성 요소에 대한 간단한 튜토리얼일 뿐입니다. 실제로 여러 곳에서 개선할 수 있습니다.

VueJobs.com

Vue.js에 관심이 있는 프런트엔드 엔지니어라면 이 웹사이트를 탐색하여 Vue 개발자를 위한 외국 요구 사항을 알아볼 수 있습니다.

더 많은 Vue-Router 구현 페이지, 특수 효과 메소드 예제가 로딩 중입니다. 관련 기사는 PHP 중국어 웹사이트를 참고하세요!