Vue-router動(dòng)畫

wushuiyong 發(fā)布于2019-08-21 16:27 / 1750人閱讀

摘要：在數(shù)據(jù)獲取期間顯示加載中之類的指示。導(dǎo)航完成之前獲取導(dǎo)航完成前，在路由的鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。附上兩種數(shù)據(jù)獲取小例

vue-router

過渡動(dòng)效
組件也有動(dòng)畫切換效果
是基本的動(dòng)態(tài)組件，所以我們可以用組件給它添加一些過渡效果：

單個(gè)路由的過渡

給每個(gè)添加特效在組件中加上中可以用那么命名
mode="out-in"http://設(shè)置先出還是先進(jìn)

基于路由的動(dòng)態(tài)過渡

還可以基于當(dāng)前路由與目標(biāo)路由的變化關(guān)系，動(dòng)態(tài)設(shè)置過渡效果：
用watch進(jìn)行監(jiān)聽

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ù)獲取

導(dǎo)航完成之后獲取

先完成導(dǎo)航，然后在接下來的組件生命周期鉤子中獲取數(shù)據(jù)。在數(shù)據(jù)獲取期間顯示『加載中』之類的指示。

導(dǎo)航完成之前獲取

導(dǎo)航完成前，在路由的 enter 鉤子中獲取數(shù)據(jù)，在數(shù)據(jù)獲取成功后執(zhí)行導(dǎo)航。

附上兩種數(shù)據(jù)獲取小例

https://github.com/hxj886600/...

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/88568.html

相關(guān)文章

利用vue-cli配合vue-router搭建一個(gè)完整的spa流程（一）

摘要：利用配合搭建一個(gè)完整的流程二前言所用的一些基本操作。全局安裝創(chuàng)建一個(gè)基于的模板創(chuàng)建過程中，為必須，其他語法檢測(cè)，單元測(cè)試等按需求安裝。為入口文件，的實(shí)例在這里書寫。掛載在中的標(biāo)簽上。定時(shí)器的作用是模擬數(shù)據(jù)請(qǐng)求延時(shí)。 2017/5/9 更新！GitHubpages搞了下，PC可以瀏覽?！?https://15901233752.github.io... showImg(https://...

cgh1999520 2019-08-20 16:01 評(píng)論0 收藏0
路由

摘要：由命名路由與子路由構(gòu)成整體結(jié)構(gòu)，我們用它構(gòu)建如下頁(yè)面。以下兩張圖說明路由和子路由是如何工作的。繼續(xù)修改好友信息的路由部分添加好友信息為組件添加動(dòng)態(tài)路由為動(dòng)態(tài)路由添加為路徑參數(shù)添加數(shù)據(jù)下發(fā)為組件添加，并使用它。不使用vue-router的情況代碼官方給出下面的例子在不使用vue-router的情況下來實(shí)現(xiàn)一個(gè)路由。該示例結(jié)合了H5歷史管理API、單文件組件、JS模塊相關(guān)內(nèi)容來實(shí)現(xiàn)路由...

Aklman 2019-08-22 16:09 評(píng)論0 收藏0
Vue2.x踩坑與總結(jié)

摘要：年前就打算學(xué)習(xí)并總結(jié)一下，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己踩過的坑總結(jié)一下分享出來。因?yàn)樵陧?xiàng)目中使用了，所以對(duì)于也有一個(gè)踩坑總結(jié)，點(diǎn)擊鏈接。年前就打算學(xué)習(xí)并總結(jié)一下vue2.x，但是因?yàn)槟昵肮ぷ鞅容^多，所以進(jìn)展十分緩慢，現(xiàn)在終于學(xué)了一大部分，而且自己在學(xué)習(xí)開發(fā)中也踩了不少坑也總結(jié)了不少，所以將自己...

bovenson 2019-08-21 11:29 評(píng)論0 收藏0
vue學(xué)習(xí)筆記（四）

摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭，以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡(jiǎn)介我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來好像...

frank_fun 2019-08-21 17:16 評(píng)論0 收藏0
vue學(xué)習(xí)筆記（四）

摘要：提供了兩種向組件傳遞參數(shù)的方式。子路由項(xiàng)路徑不要使用開頭，以開頭的嵌套路徑會(huì)被當(dāng)作根路徑。路由實(shí)例的方法這里學(xué)習(xí)兩個(gè)路由實(shí)例的方法和。實(shí)際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡(jiǎn)介我們經(jīng)常使用vue開發(fā)單頁(yè)面應(yīng)用程序（SPA）。在開發(fā)SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁(yè)面應(yīng)用程序看起來好像...

lwx12525 2019-08-01 17:50 評(píng)論0 收藏0