Vue3 - Router 樣式與轉場

tags: Vue

category: Front-End

description: Vue3 - Router 樣式與轉場

created_at: 2022/07/25 00:00:00

回到 手把手開始寫 Vue3

前言

這篇應該是路由的最後一篇，因為怕篇幅太長(想保留到後面的內容)，不過到這邊應該基本功能都夠用了，其他需要的再上文件查就好，像是什麼子路由，或是一些方便的功能之類的，之後如果有特別用到再提。

RouterLink

如果平常就有打開開發者工具來看，應該已經有注意到他 class 的改變，就可以根據那些 class 去做樣式了。

• router-link-active: 有 active 的路由
• router-link-exact-active: 完全匹配的路由

也就是說 router-link-active 可能單獨存在，但 router-link-exact-active 就會跟 router-link-active 一起出現。

會有獨立存在的原因，通常就是因為子路由，舉例來說

/users/:id 可能是第一層，而他下面可能有 test 組合成 /users/1/test 之類的。

那麼如果到 /users/1/test 這個網址且同時畫面上有兩個 RouterLink，分別是連到 /users/1 與 /users/1/test，那麼就會發生這個情況。

• /users/1: router-link-active
• /users/1/test: router-link-exact-active

而如果今天使用者在 /users/1 這個網址，那麼 /users/1 的這個連結就會同時擁有那兩個 class。

RouterView

有時候可能希望在轉換頁面的時候要有轉場動畫，那麼這時候之前提到的 Transition 就又派上用場了。

<router-view v-slot="{ Component }">
  <transition>
    <component :is="Component" />
  </transition>
</router-view>

然後接下來就跟之前的 Transition 一模一樣了，這邊拿最簡單的淡入淡出當範例。

.v-enter-active,
.v-leave-active {
  transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}

然後如果你是拿上一篇的範例 (切換 users)應該會發現沒反應，因為官方範例是沒有帶 key 的，所以他用同一個組件，確實不會觸發轉場。

只是這時要注意，那個 key 要加在 component 上而不是 RouterView 上，因為你放在外層等於他重新渲染 Transition 等同沒動畫，應該加在內層。

<component :is="Component" :key="$route.path" />

然後看起來動畫怪怪的，這時加上 mode 就會好了(以淡入淡出來說的話)

<transition mode="out-in">
  <component :is="Component" :key="$route.path" />
</transition>

總結

路由相關的就到一個段落了，接下來是關於中央狀態管理的部分，其他路由等到時用到再去查文件。