Vue-Router I
路由常遇到的事，在製作網頁時常會遇到設定上的問題
多個 .vue 如何放在同一個頁面
與 <transsition> 動畫怎麼啟動
過渡效果，設定要使用 <router-view>包覆 <transition> 標籤，這點很重要，一開始會常會認為相反。
然後一定要有一個驅動方式，例如 @click、<router-link />、v-if 來讓它顯示效果，否則是不會平白無故動作。
html
<router-view v-slot="{ Component }">
<transition name="fade">
<component :is="Component" />
</transition>
</router-view>
js
const routes = [
{
path: '/custom-transition',
component: PanelLeft,
meta: { transition: 'slide-left' },
},
{
path: '/other-transition',
component: PanelRight,
meta: { transition: 'slide-right' },
},
]
上一頁、下一頁怎麼設定 ( Navigation Guards )
官方叫做 Navigation guards導航守衛 根本看不懂是什麼意思，主要是來監控頁面轉跳的方式。
js
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})
為什麼導覽列的路徑會多一個 ＃ Hash (Different History modes)
多了一個 # 官方叫做 歷史模式，我看不懂跟歷史的關係，只知道對 HTML5 網頁上設計連結或 轉跳 同頁面 標籤的 ID 有辨識上的影響，在設定上有兩個選擇 createWebHashHistory、createWebHistory，上一篇有稍微提到這個 # Hash。
py
import { createRouter, createWebHashHistory } from 'vue-router'
const router = createRouter({
history: createWebHashHistory(),
routes: [
//...
],
})