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