前言
讓客戶滿意是我們工作的目標，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領域值得信任、有價值的長期合作伙伴，公司提供的服務項目有：域名申請、網(wǎng)頁空間、營銷軟件、網(wǎng)站建設、果洛州網(wǎng)站維護、網(wǎng)站推廣。
vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用。vue的單頁面應用是基于路由和組件的，路由用于設定訪問路徑，并將路徑和組件映射起來。傳統(tǒng)的頁面應用，是用一些超鏈接來實現(xiàn)頁面切換和跳轉的。在vue-router單頁面應用中，則是路徑之間的切換，也就是組件的切換。
如果你在使用 Vue.js 和 Vue-Router 開發(fā)單頁面應用。因為每個頁面都是一個 Vue 組件，你需要從服務器端請求數(shù)據(jù)，然后再讓 Vue 引擎來渲染到頁面上。
例如，這里有個用戶個人資料的頁面。
user.vue 文件如下：
在動畫過渡期間向服務器請求數(shù)據(jù)，如下：
這樣，我們可以通過訪問變量 $loadingRouteData。就可以實現(xiàn)隱藏所有的頁面元素，顯示某個正在加載的元素，比如某個 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 感興趣的前端工程師，可去這個網(wǎng)上瀏覽下，了解下國外對 Vue 開發(fā)者的要求。
好了，以上就是這篇文章的全部內容了，希望本文的內容對大家的學習或者工作能帶來一定的幫助，如果有疑問大家可以留言交流。
