當不是子視圖時，在 vue-router 中將嵌套 URL 顯示為活動的

Question

我有一個帶有“項目”選項的側邊欄導航。在我的 vue-router 中，我定義了以下路由。

/projects
/projects/:project_id

對於/project這將加載所有項目的列表，並且/projects/:project_id應該只顯示單個項目的詳細信息。 在每種情況下，UI 都充滿了空間，它們之間沒有共享的行為/模板。

我希望邊欄中的“項目”選項顯示為活動狀態，即使用戶位於/projects/:project_id也是如此。

我在這里有什么選擇？ 我正在避免嵌套子視圖，因為我不希望/不需要它們之間的共享行為。

Answer 1

你需要 router-link-exact-active

示例： https ://codesandbox.io/s/vue-router-forked-ocxxbl?file=/src/components/Navigation.vue

Answer 2

感謝Paul Tsai讓我意識到這是 Vue 3 特有的問題。 意識到這一點有助於縮小我的搜索范圍，然后我發現了這個：

其中有一個工作解決方案鏈接，因為router-link-active不再從 URL 計算，而是從路由器本身定義的層次結構計算。