MUKI space*
Front-end Development,
Effective Note-Taking.
在 Vue.js 設定多個入口網址，並顯示對應的網站標題
公司開發網站後台，使用 Vue.js 結合 SPA 開發，無需 SEO。後來因 B 公司需求，增加多個入口網址，並替換登入頁 LOGO。未登入時，訪客會看到不同 LOGO，登入後 LOGO 依 platform 顯示。設定路由匹配同元件，使用 meta.platform 區分 LOGO。網站標題問題透過複製 index.html 為 b.html，修改標題，並用 nginx 指向不同入口解決。這樣可達成多入口網址，且有獨立標題與 LOGO。...
不重新整理網頁，讓 Vue3 強制更新當前路由並重新渲染頁面
切換使用者時，可透過 Vue3 的 :key 來強制更新路由，避免使用 window.reload 重新整理頁面。Vue3 利用虛擬 DOM 技術，通過比較新舊虛擬 DOM 的差異，僅更新需要變化的部分，提高效能。
在 <router-view /> 上使用 :key，當 :key 改變時，Vue 會重新渲染該路由。使用 pinia 管理 routeKey，可在任何頁面觸發 routeKey++，達成頁面更新。此方法適合在特定狀態變化時，強制渲染特定頁面。...
Vue3 使用 watch 監聽路由變化，支援瀏覽器的上一頁 / 下一頁按鈕切換
使用 Vue3 可以監聽路由變化，解決瀏覽器「上一頁」「下一頁」按鈕切換時，選單 active 樣式不變的問題。
透過 watch 監聽 currentRoute，每次路由變化時更新 activeIndex，確保選單樣式隨路由變化而更新。...
用 React Hook 規劃路由
學習 React 路由時，需自行處理更多細節，並了解底層邏輯。利用 React Hook 將類似 Vue 的功能串聯，如 router-view 和導航守衛。未登入時，所有網址跳轉至 /login；登入後顯示固定元件，並根據不同網址渲染對應元件。建立 PublicRoute 和 ProtectedRoute 來實現導航守衛，並在 Routes.tsx 中配置路由。最後在 App.tsx 渲染路由元件，根據 token 顯示 Navbar。...
使用 Vue 自定義指令(custom directive)製作網站權限
Vue 支援自定義指令，如 v-role，可用來設計網站權限。只需在 template 中使用 v-role 設定會員權限即可。這些指令可應用於 router，實現選單的顯示與隱藏，並可連接後端資料庫動態修改會員權限。
在 main.ts 中定義指令，並封裝後匯入。使用 pinia 管理 roles data，或暫存於 localStorage。設置 router meta 定義不同權限的訪問路由，使用 nav guard 確保未授權用戶被導回 /home。...
設定 Vue Router 讓巢狀路由的 parmas 與靜態路由同層級
規劃部落格網址結構時，初始設計為首頁、分頁、分類、分類分頁及單篇文章路徑。遇到問題是 Vue 將巢狀路由的 category 當成 :pageIndex 的參數，導致無法顯示正確網址。
調整方法是將 :pageIndex 也設為巢狀路由，並修改路由順序，將 :pageIndex 放在最後渲染。如此一來，當路徑為 /topic/category/cateA/1 時，能優先渲染正確頁面，不被 :pageIndex 截胡。...
Vue 自製 breadcrumb 導航麵包屑元件
Vue 自製 breadcrumb 導航麵包屑元件主要使用嵌套路由來自動顯示階層。首先在 router/index.js 設定路由，使用 redirect 將無資料頁面導向 userList。User/Index.vue 中放置 breadcrumb 元件和 router-view。
製作 breadcrumb 元件時，利用 router 的 matched 屬性顯示設定的 meta。透過 watch 和 onMounted 監聽路由變化，動態更新 breadcrumbList。最後使用 CSS after 語法調整樣式，實現簡單的導航效果。...
Vue3 如何載入 Router 以及 Vuex
VUE3 因為 Composition API 的緣故，使用 router 以及 vuex 的方式有所不同。載入 router 時，需使用 useRouter 和 useRoute 方法，並可透過 router.push 導航和 route.params 讀取參數。
載入 VUEX 時，需使用 useStore 方法，並可透過 store.state 讀取狀態。更多詳細介紹可參考官網。...