導航圖常用于大型網站或應用程序中，主要用來方便用戶進行頁面之間的切換，提高用戶的使用體驗。在Vue中，我們可以很方便地使用路由來實現導航圖。

首先，我們需要安裝Vue Router，可以通過npm install vue-router來進行安裝。安裝完成后，我們可以在main.js文件中引入Vue Router并將其掛載到Vue實例中。

import Vue from 'vue'
import VueRouter from 'vue-router'
import App from './App.vue'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
// 路由配置
]
})
new Vue({
router,
render: h =>h(App)
}).$mount('#app')

接下來，我們需要定義各個頁面的路由信息。路由信息可以包括頁面的路徑、組件、名稱等信息。在上面的代碼中，我們在VueRouter的構造函數中定義了一個routes數組，該數組中包含了所有頁面的路由信息。

每個路由信息可以通過一個對象來表示，該對象包括path、component、name等多個屬性。其中path指定了該頁面的路徑，component指定了該頁面所對應的Vue組件。

const routes = [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
component: About
},
{
path: '/contact',
name: 'contact',
component: Contact
}
]

定義好路由信息之后，我們需要在Vue實例中將路由信息傳遞給Vue Router。在上面的代碼中，我們通過創建VueRouter實例并將routes數組傳遞給其構造函數來實現該功能。

在頁面中使用導航圖時，我們可以使用Vue Router提供的router-link組件來創建導航鏈接。該組件可以接收to屬性，該屬性指定了鏈接的目標路由路徑。

HomeAboutContact

此外，我們還可以在Vue組件中通過$router對象來實現編程式導航。$router對象包含了一些方法，如push()、replace()等，可以實現跳轉到其他路由。例如，我們可以在某個Vue組件中編寫以下代碼來實現跳轉到另一個頁面。

this.$router.push('/about')

在Vue中實現導航圖非常簡單，只需要定義好路由信息、綁定路由信息和創建導航鏈接即可。由于Vue Router還提供了一些高級功能，如路由守衛、異步組件等，因此我們在使用Vue進行大型項目的開發時可以更加靈活地管理頁面路由。