導航欄是一個常見的組件，它可以使得用戶在網站內快速地跳轉到不同的頁面。Vue Router 是 Vue.js 官方的路由管理器，它能夠幫助我們在 Vue 中實現復雜的導航功能。此外，它還提供了很多特性，比如異步路由、路由懶加載等等

在使用 Vue Router 之前，我們需要先安裝它。可以通過 npm 方式進行安裝：

npm install vue-router

在安裝完成之后，我們需要在項目中引用它，方法是在 main.js 文件中添加如下代碼：

import VueRouter from 'vue-router' 
Vue.use(VueRouter)

接下來，我們需要定義路由。路由可以定義在一個單獨的文件中，比如 router.js，也可以在 main.js 中單獨定義。這里我們將路由定義在一個單獨的文件中：

import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
component: About
}
]
const router = new VueRouter({
routes
})
export default router

在上面的代碼中，我們定義了兩個路由，一個是'/'，另一個是'/about'。path 是路由路徑，name 是路由名稱，component 是對應的組件。

我們已經定義了路由，接下來，我們需要把路由和組件關聯起來。在 App.vue 中，我們需要添加一個 router-view 標簽，這個標簽將會渲染匹配到的組件，代碼如下：

在上面的代碼中，我們添加了兩個 router-link 標簽，這些標簽可以表示一個可點擊的鏈接，其 to 屬性指定了跳轉的路徑。當用戶點擊這個鏈接時，Vue Router 會自動匹配路由，并渲染對應的組件。

最后，在 main.js 文件中添加路由器對象，并把路由器對象和 App.vue 組件實例關聯起來，代碼如下：

import Vue from 'vue'
import App from './App.vue'
import router from './router'
Vue.config.productionTip = false
new Vue({
router,
render: h =>h(App),
}).$mount('#app')

至此，我們已經完成了 Vue Router 導航欄的配置。當用戶點擊鏈接時，Vue Router 會根據路由映射關系自動渲染頁面，實現了快速跳轉的效果。