Vue AMap是一個基于Vue.js和高德地圖API的開源插件，提供了豐富的地圖組件和方便易用的地圖操作方法。其中最受歡迎的功能之一就是導航模塊。下面將介紹如何使用Vue AMap進行簡單的導航操作。

首先需要在Vue項目中安裝Vue AMap插件，本示例使用npm進行安裝。

npm install vue-amap --save

安裝完成后，在Vue的入口文件中引入Vue AMap并進行配置。

import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '高德地圖key',
plugin: [
'AMap.Geolocation',
'AMap.Driving', 
'AMap.Geocoder'
],
uiVersion: '1.0'
})

key值需要申請高德地圖開發者賬號并創建應用獲取。

添加導航組件，在需要顯示導航的頁面模板中添加以下代碼。

其中startCoordinate和endCoordinate為起點和終點的經緯度坐標數組，waypoints為途經點的經緯度坐標數組。

此外，還需要在data中添加以下內容。

data() {
return {
mapReady: false,
startCoordinate: [117.227, 31.820],
endCoordinate: [117.232, 31.817],
waypoints: []
}
},
computed: {
plugins() {
return ['AMap.Geolocation', 'AMap.Driving', 'AMap.Geocoder']
},
uiVersion() {
return '1.0'
},
useAMapUI() {
return true
}
},
methods: {
onMapInit() {
this.mapReady = true
}
}

在methods中獲取地圖初始化完成的事件，設置mapReady狀態為true，表示地圖已經準備好。

有了以上操作，就可以在頁面中成功顯示出地圖和導航路線了。