這篇文章主要給大家介紹了利用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('/users/' + this.$route.params.userName)
.then(function (response) {
this.user = response.data;
transition.next();
});
}
}
}
</script>就可以實現隱藏所有的頁面元素，顯示某個正在載入的元素，例如某個 logo 等。
<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 開發者的要求。
🎜更多Vue-Router實作頁面正在載入特效方法範例相關文章請關注PHP中文網！ 🎜
