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提供路由的信息
