過渡動效

<router-view> 是基本的動態組件，所以我們可以用 <transition> 組件給它添加一些過渡效果：

<transition> <router-view></router-view></transition> 

單個路由的過渡

上面的用法會給所有路由設置一樣的過渡效果，如果你想讓每個路由組件有各自的過渡效果，可以在各路由組件內使用 <transition> 并設置不同的 name。

基于路由的動態過渡

還可以基于當前路由與目標路由的變化關系，動態設置過渡效果

<!-- 使用動態的 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' }} 

數據獲取

進入某個路由后，需要從服務器獲取數據。例如，在渲染用戶信息時，你需要從服務器獲取用戶的數據。我們可以通過兩種方式來實現：

1.導航完成之后獲?。合韧瓿蓪Ш剑缓笤诮酉聛淼慕M件生命周期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示。

2.導航完成之前獲?。簩Ш酵瓿汕埃诼酚傻?enter 鉤子中獲取數據，在數據獲取成功后執行導航。

導航完成后獲取數據

當你使用這種方式時，我們會馬上導航和渲染組件，然后在組件的 created 鉤子中獲取數據。這讓我們有機會在數據獲取期間展示一個 loading 狀態，還可以在不同視圖間展示不同的 loading 狀態。

假設我們有一個 Post 組件，需要基于 $route.params.id 獲取文章數據：

在導航完成前獲取數據

通過這種方式，我們在導航轉入新的路由前獲取數據。我們可以在接下來的組件的 beforeRouteEnter 鉤子中獲取數據，當數據獲取成功后只調用 next 方法。

下面是地址：https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...

總結

以上所述是小編給大家介紹的Vue 路由 過渡動效 數據獲取方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！