Vue 是一款流行的前端開發框架,它的組件化和數據綁定特性使得開發者可以高效地構建交互性強的單頁面應用(Single Page Application,SPA)。Vue 的 sidebar item 是一個用于創建側邊欄導航的組件,它可根據指定的數據源自動生成側邊欄菜單。
/* sidebar item 組件代碼示例 */
上述代碼定義了一個名為 SidebarItem 的組件,它接收兩個參數:item 和 currentPath。item 是一個 JSON 對象,包含了側邊欄菜單的標題和子項。currentPath 則是當前頁面的路由路徑,用于判斷當前頁面對應的側邊欄菜單項。
在組件的模板中,使用 v-for 指令循環遍歷子項,并為每個子項綁定路由鏈接。路由鏈接使用了 Vue Router 的 router-link 組件,這個組件會根據指定的 URL 自動為按鈕添加了 "active" 樣式,以便用戶清楚地看到當前所處的頁面在菜單中的位置。
有了 Sidebar Item 組件的幫助,我們可以輕松地構建出一個完整的側邊欄導航,方便用戶快速瀏覽和訪問應用的各個頁面。