Vue-Router implementation page loading special effect method example, vue-router example

Vue-Router implementation page loading special effect method example, vue-router example

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 single-page applications are based on routes and components. routes are used to set access paths and map paths and components. In traditional page applications, some hyperlinks are used for page switching and redirection. In the vue-router single page application, it refers to switching between paths, that is, switching between components.

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

For example, there is a user profile page.

The user. vue file is as follows:

<template> <div>  

Request data from the server during the animation transition, as shown below:
<script>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();    });  } }}</script>
In this way, we can access the variable $ loadingRouteData. You can hide all the page elements and display a loaded element, such as a logo.
<div v-if="$loadingRouteData"> <div class="white-widget grey-bg author-area"> <div class="auth-info row"> <div class="timeline-wrapper"> <div class="timeline-item">  <div class="animated-background">   <div class="background-masker header-top"></div>   <div class="background-masker header-left"></div>   <div class="background-masker header-right"></div>   <div class="background-masker header-bottom"></div>   <div class="background-masker subheader-left"></div>   <div class="background-masker subheader-right"></div>   <div class="background-masker subheader-bottom"></div>  </div> </div> </div> </div> </div></div><div v-if="!$loadingRouteData"> <div>  

For example, the loading style code 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 have the effect of loading Vue-Router. You can write the above code into a separate component and reference it wherever you use it.
Last

This is only a simple tutorial on the components loaded by Vue-Router. It can be improved in many places,
VueJobs.com

If you are a front-end engineer interested in Vue. js, you can go to this website to learn about the foreign requirements for Vue developers.
Well, the above is all about this article. I hope this article will help you in your study or work. If you have any questions, please leave a message.