vue router 和 組件生命周期的理解


vue router 分為 h5 history api模式和hash模式,在 Router 的構造函數的參數:mode :history 可以將路由模式改回history

<router-view> 是展示視圖的,<router-link> 類似於a標簽的,點擊即可以跳轉到對應的url, router.push 是js api的方式使用 router-link

組件的生命周期是:beforeCreate,created,befoerMount,mounted,beforeDestroy,destroy

keep-alive 的構子函數: activated,deactivated,

路由的構子函數:全局的:beforeEach,afterEach

路由內獨享的: beforeEnter

組件內的:beforeRouterEnter,beforeRouterUpdate,beforeRouterLeave

比如 A 有子路由 D,F,從D切換到F執行的是:

D beforeRouterLeave
beforeEach
 A beforeRouterUpdate
 F beforeenter
 F beforeRouterEnter
 afterEach
 A before update
F before create
 F created
F beforemount
 D beforeDestory
 D destoryed
 F mounted
 A updated

即所有執行順序是 全局的before,父組件beforerouterUpdate,路由的before,組件的before

路由的before 鈎子 在 組件的beforeCreate 前執行

前一個組件的 beforeDestroy 在后一個組件的 beforeMount 之后執行,同樣適用於組件之間切換

父組件的beforeUpdate 在 子組件beforeCreate 之前,父組件的update 在 子組件mounted后,父組件 beforerouterupdate 在 beforeEach后  

如果是keep-alive 包裹的 router-view 順序如下

D beforeRouterLeave
 beforeEach
beforeRouterUpdate
 F beforeenter
 F beforeRouterEnter
afterEach
A before update
 D deactivated
 F actived
 A updated

如果父組件沒有keep-alive,而子組件keep-alive,子組件不會被keep-alive,但是任然會調用 avtived,和deactivated鈎子函數,調用順序如下,activated在mounted之后調用,deactivated 在 beforeDestroy之前調用

F beforeDestory
D deactivated
 D beforeDestory
 D destoryed
 F destoryed
 F before create
 F created
F beforemount
D before create
 D created
 D beforemount
 D mounted
D actived
 F mounted

 

 

keep-alive    表示當前標簽下的組件被緩存了,而不是表示某類組件被緩存。使用  $route.meta.keepAlive 可以根據路由動態指定緩存

 如果是從 /a/f 到d組件的,那么 就將他緩存,如果不是則不緩存。比如從/a/f 切到了/a/d  這時執行的是前面的,這里已經被緩存了。下次再從、/a/f 到/a/d會直接取緩存。如果不是則取得是下面的,沒有緩存

<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

D組件下:

beforeRouteEnter(to,from ,next){

if(from.path=="/a/f")
{
to.meta.keepAlive=true;
}
else
{
to.meta.keepAlive=false;
}
next();
},

 vue 中的 $route 和$router 每個組件中都可以訪問這兩個對象, $router 在所有組件中都是同一個引用就是 在Vue.use 和new Vue中注入到this中的,所以每個組件都有一個,且引用相同。$route 每個組件新構造的路由信息對象,在同一時刻每個組件中的$route值都是一樣的。在 new VueRoute 中定義的  meta 會在$route中,訪問到哪個路徑,對應的Meta就會將$route上的meta替換。

$router 主要提供路由的操作方法,$route提供路由的信息

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM