Vue 路由 過渡動效 數(shù)據(jù)獲取方法
過渡動效
<router-view> 是基本的動態(tài)組件，所以我們可以用 <transition> 組件給它添加一些過渡效果：
<transition> <router-view></router-view> </transition>
單個路由的過渡
上面的用法會給所有路由設置一樣的過渡效果，如果你想讓每個路由組件有各自的過渡效果，可以在各路由組件內使用 <transition> 并設置不同的 name。
基于路由的動態(tài)過渡
還可以基于當前路由與目標路由的變化關系，動態(tài)設置過渡效果
<!-- 使用動態(tài)的 transition name -->
<transition :name="transitionName">
<router-view></router-view>
</transition>
// 接著在父組件內
// watch $route 決定使用哪種過渡
watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
數(shù)據(jù)獲取
進入某個路由后，需要從服務器獲取數(shù)據(jù)。例如，在渲染用戶信息時，你需要從服務器獲取用戶的數(shù)據(jù)。我們可以通過兩種方式來實現(xiàn)：
1.導航完成之后獲取：先完成導航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示。
2.導航完成之前獲?。簩Ш酵瓿汕?，在路由的 enter 鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導航。
導航完成后獲取數(shù)據(jù)
當你使用這種方式時，我們會馬上導航和渲染組件，然后在組件的 created 鉤子中獲取數(shù)據(jù)。這讓我們有機會在數(shù)據(jù)獲取期間展示一個 loading 狀態(tài)，還可以在不同視圖間展示不同的 loading 狀態(tài)。
假設我們有一個 Post 組件，需要基于 $route.params.id 獲取文章數(shù)據(jù)：
在導航完成前獲取數(shù)據(jù)
通過這種方式，我們在導航轉入新的路由前獲取數(shù)據(jù)。我們可以在接下來的組件的 beforeRouteEnter 鉤子中獲取數(shù)據(jù)，當數(shù)據(jù)獲取成功后只調用 next 方法。
下面是地址：https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...
總結
以上所述是小編給大家介紹的Vue 路由 過渡動效 數(shù)據(jù)獲取方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關文章
詳解Vue-cli webpack移動端自動化構建rem問題
這篇文章主要介紹了詳解Vue-cli webpack移動端自動化構建rem問題，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
element-ui表格數(shù)據(jù)轉換的示例代碼
這篇文章主要介紹了element-ui表格數(shù)據(jù)轉換的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
Vue?Router解決多路由復用同一組件頁面不刷新問題(場景分析)
這篇文章主要介紹了Vue?Router解決多路由復用同一組件頁面不刷新問題,多路由復用同一組件的場景分析，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
這篇文章主要介紹了mpvue全局引入sass文件的方法步驟，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-03-03
這篇文章主要給大家介紹了基于vue大數(shù)據(jù)表格卡頓問題的完美解決方案，文中通過示例代碼介紹的非常詳細，對大家學習或者使用vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧2019-03-03
Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊思路詳解
這篇文章主要介紹了Vue?+?Element?實現(xiàn)按鈕指定間隔時間點擊,實現(xiàn)思路大概是通過加一個本地緩存的時間戳，通過時間戳計算指定時間內不能點擊按鈕，具體實現(xiàn)代碼跟隨小編一起看看吧2023-12-12
接收一個輸入的手機號,判斷輸入的手機號是否正確是一個很常見的功能,這篇文章主要給大家介紹了關于前端Vue手機號校驗以及后端Java手機號校驗的相關資料,需要的朋友可以參考下2023-11-11
這篇文章主要介紹了應用provide與inject刷新Vue頁面的兩種方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，多多進步，祝大家早日升職加薪2021-09-09
這篇文章主要介紹了玩轉Vue的8個小技巧，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
vue項目Network: unavailable的問題及解決
這篇文章主要介紹了vue項目Network: unavailable的問題及解決方案,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-09-09