最近寫了一個百度地圖的專案，要求底部有一個導航欄。具體如下圖：

首先，拿到了底部導航欄的所有圖示圖片，圖片都有兩種。灰色的代表未選中，選中的用帶樣色的圖片替換。

先看一下，元件中 html結構：通過vue提供的v-for方法，進行遍歷顯示footNav這個陣列。數組裡邊存放著{title:"銀行"，url:" "，url1:" "}，將圖片的 src與isSelect進行繫結，並進行判斷，如果等於當前的title時即為選中當前的導航，顯示選中時的圖片url1。

<div class="footer">
  <ul>
    <li v-for="item in footNav" 
 
@click="selectMapNav(item.title)">
      <img :src="isSelect === item.title ? item.url1 : item.url" alt="">
      <p>{{item.title}}</p>
    </li>
  </ul>
</div>

在vue data () 中定義一個數組，裡邊存放每一個導航的標題，如‘銀行’，未選中時顯示的圖片url，選中時的圖片url1。isSelect表示當前選中的，預設選中銀行。

isSelect: '銀行'
 
,
footNav: [{title: '銀行', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'},
{title: '公交 ', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'},
{title: '地鐵 ', url: '../../../static/baiduMap/[email protected]
 
', url1: '../../../static/baiduMap/[email protected]'},
{title: '教育 ', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'},
{title: '醫院 ', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'},
{title: '休閒 ', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'},
{title: '購物 ', url: '../../../static/baiduMap/[email protected]', url1: '../../../static/baiduMap/[email protected]'}
]

在methods方法中，寫上html中呼叫的事件。通過html結構層那裡的點選事件selectMapNav(item.title)傳過來的title賦值給isSelect即可實現導航欄的點選狀態的變化。

selectMapNav (title) {
  this.isSelect = title }

因為，我這裡的url是通過繫結資料層的url裡邊字串實現。這就會導致最後通過webpack打包後，這個路徑還是這個字串裡邊的路徑不會改變。

所以，出現了找不這張圖片的現象。

解決辦法：因為通過webpack打包後就一個static資料夾。所以通過webpack打包前把上面的url路徑改為下面的路徑：

footNav: [{title: '銀行', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '公交 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '地鐵 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '教育 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '醫院 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '休閒 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'},
{title: '購物 ', url: './static/baiduMap/[email protected]', url1: './static/baiduMap/[email protected]'}
]