樹狀導航欄是一種常見的網站設計元素，它可以讓用戶方便地瀏覽網站的內容，并快速找到所需的信息。在 Vue 中，實現樹狀導航欄也非常簡單。下面將介紹如何使用 Vue 實現一個基本的樹狀導航欄。

首先需要準備一個樹形結構的數據，這里使用一個簡單的數組作為示例：

[
{
name: '首頁',
path: '/',
children: []
},
{
name: '圖書',
path: '/books',
children: [
{
name: '文學',
path: '/books/literature',
children: []
},
{
name: '科技',
path: '/books/technology',
children: []
}
]
},
{
name: '音樂',
path: '/music',
children: []
}
]

然后定義一個組件來渲染樹狀導航欄：

Vue.component('tree-nav', {
props: ['data'],
template: `
<ul><li v-for="item in data"><a :href="item.path">{{ item.name }}</a><tree-nav v-if="item.children" :data="item.children"></tree-nav></li></ul>`
})

在這個組件里，使用了遞歸的方式來渲染每一級的子菜單。如果當前節點有子菜單，那么就再次調用組件本身來渲染子菜單。這條語句：

<tree-nav v-if="item.children" :data="item.children"></tree-nav>

需要注意的是，這里使用了 v-if 指令來判斷當前節點是否有子菜單。如果沒有，那么就不需要再次渲染組件，否則會造成無限遞歸。

最后在頁面中使用組件：

<tree-nav :data="treeData"></tree-nav>

這里的 treeData 就是之前定義的樹形結構數據。

以上是一個基本的樹狀導航欄的實現方法。如果需要更多的功能，可以對組件進行擴展，例如添加展開/收起菜單的功能，添加點擊效果等。