路由導航優化：側邊欄組件跳轉問題解決方案

問題背景

在實現通知系統的 entity 群組點擊跳轉功能時，遇到了一個典型的 Vue Router 導航問題：

場景描述：

• Notification.vue 組件位於側邊欄，在所有頁面都可見
• 需要點擊 entity 群組標題跳轉到 NotificationList 頁面並帶入篩選條件
• 問題：當用戶已在 /notify 頁面時，點擊側邊欄群組無法正確切換篩選條件

問題分析

根本原因

當在同一頁面進行路由跳轉時，Vue Router 會進行路由比較，如果目標路由與當前路由相同（包括查詢參數），路由變化事件不會被觸發。

技術細節

// 問題場景：用戶在 /notify?entityType=order 頁面
// 再次點擊 "訂單相關" 群組時
router.push({
  name: 'notify-list',
  query: { entityType: 'order' }  // 相同的查詢參數
})
// Vue Router 認為這是相同路由，不觸發變化

解決方案演進

方案一：時間戳強制刷新（初版）

// 複雜的兩步驟跳轉 + 時間戳
const handleEntityGroupClick = (entityType: string) => {
  if (router.currentRoute.value.name === 'notify-list') {
    router.replace({ name: 'notify-list', query: {} }).then(() => {
      router.replace({
        name: 'notify-list',
        query: {
          entityType: entityType,
          _t: Date.now().toString()  // 時間戳強制變化
        }
      })
    })
  } else {
    router.push({ name: 'notify-list', query: { entityType: entityType } })
  }
}

問題：

• URL 污染（無意義的時間戳參數）
• 邏輯複雜，維護困難
• 不符合 Web 標準慣例

方案二：統一 router.replace（最終方案）

// 簡化統一的跳轉邏輯
const handleEntityGroupClick = (entityType: string) => {
  router.replace({
    name: 'notify-list',
    query: {
      entityType: entityType
    }
  })
}

優勢：

• 代碼簡潔（從 20+ 行減少到 7 行）
• URL 乾淨，無污染參數
• 統一處理跨頁面和同頁面跳轉
• 符合 Vue Router 最佳實踐

技術實現細節

Notification.vue 修改

import { useRouter } from 'vue-router'

const router = useRouter()

const handleEntityGroupClick = (entityType: string) => {
  // 統一使用 router.replace 處理跳轉，確保路由變化被觸發
  router.replace({
    name: 'notify-list',
    query: {
      entityType: entityType
    }
  })
}

NotificationList.vue 路由監聽

import { useRoute } from 'vue-router'

const route = useRoute()

// 統一的篩選應用函數
const applyEntityTypeFilter = (entityType: string | undefined) => {
  if (entityType && typeof entityType === 'string') {
    selectedFilters.value.entityType = [entityType]
  } else {
    selectedFilters.value.entityType = []
  }
}

// 初始化時應用路由參數
onMounted(async () => {
  applyEntityTypeFilter(route.query.entityType as string)
  // ... 其他初始化邏輯
})

// 監聽路由變化
watch(() => route.query.entityType, (newEntityType) => {
  applyEntityTypeFilter(newEntityType as string)
}, { immediate: false })

為什麼 router.replace 有效？

核心原理

1. replace vs push：replace 會替換當前歷史記錄，即使查詢參數相同也會觸發路由更新
2. 響應式更新：Vue Router 的響應式系統會偵測到路由對象的變化
3. watch 觸發：路由監聽器會正確觸發，更新篩選狀態

與其他方案對比

方案	優點	缺點	推薦度
時間戳強制刷新	確保觸發	URL污染、邏輯複雜	❌
直接操作狀態	性能最佳	URL不同步、無歷史記錄	⚠️
router.replace	簡潔、URL同步、符合標準	無明顯缺點	✅
事件通信	解耦良好	架構複雜、狀態難追蹤	⚠️

開發思維過程

1. 問題識別階段

• 現象：同頁面點擊無反應
• 假設：路由參數相同導致無變化
• 驗證：添加 console.log 確認路由變化

2. 方案探索階段

• 第一反應：強制刷新（時間戳方案）
• 深入思考：分析 Vue Router 機制
• 方案比較：列出多種可能解決方案

3. 最佳實踐選擇

• 核心原則：簡潔性 > 複雜性
• 用戶體驗：URL 即狀態的 Web 標準
• 可維護性：代碼清晰易懂

4. 實現驗證

• 功能測試：跨頁面和同頁面場景
• 代碼審查：ESLint 和 TypeScript 檢查
• 性能考量：無額外開銷

關鍵學習點

1. Vue Router 深度理解

• push vs replace 的使用場景
• 路由比較機制的工作原理
• 響應式路由監聽的最佳實踐

2. 問題解決方法論

1. 現象描述 → 根因分析 → 方案設計 → 實現驗證
2. 先求可行 → 再求優雅 → 最後求性能
3. 考慮邊界情況 → 保持代碼簡潔 → 符合業界標準

3. 架構設計原則

• 單一職責：路由跳轉邏輯與業務邏輯分離
• 狀態同步：URL 作為唯一的狀態來源
• 用戶體驗：支援書籤、分享、瀏覽器歷史

適用場景

這個解決方案適用於以下類似場景：

• 側邊欄導航組件的頁面內跳轉
• 篩選條件的路由參數傳遞
• 同頁面不同狀態的切換需求
• 需要保持 URL 同步的狀態管理

注意事項

1. 路由設計

• 確保路由參數設計合理，避免過度複雜
• 考慮參數的向後兼容性

2. 性能考量

• 頻繁的路由跳轉可能影響性能
• 大量參數可能導致 URL 過長

3. 用戶體驗

• 路由變化應該有適當的載入提示
• 考慮失敗情況的錯誤處理

總結

通過這次優化，我們學到了：

1. 簡潔往往更有效：複雜的解決方案不一定是最好的
2. 深入理解工具：了解 Vue Router 的工作機制很重要
3. 用戶體驗優先：技術實現應該服務於用戶需求
4. 標準化思維：遵循 Web 標準能帶來更好的可維護性

這個案例展示了如何從問題發現到最終解決的完整思維過程，對類似的路由導航問題具有很好的參考價值。

---

記錄時間：2025-01-25
相關文件：

• src/components/notify/Notification.vue
• src/components/notify/NotificationList.vue
• src/router/index.ts