[vue問題解決]vue 在瀏覽器上點擊失效（路由不跳轉）

問題引入

自己寫的小demo中，引入mui.js並實現相關功能后，再點擊底部的導航欄發現點擊失效

如下所示，一個標准的路由使用，於chrome瀏覽器中點擊失效，於IE和火狐上可以

<nav class="mui-bar mui-bar-tab">
  <router-link to="/home" class="mui-tab-item">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首頁</span>
  </router-link>
</nav>

解決方案一

將這種聲明式的方式換成編程式的方式

<nav class="mui-bar mui-bar-tab">
  <a class="mui-tab-item" @click.prevent="toHome">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首頁</span>
  <a>
</nav>

methods: {
  toHome() {
    this.$router.push("/home");
  }
}

解決方案二

看視頻學習的時候，老師的解釋是App.vue中的router-link身上的類名和mui-tab-item 存在兼容性問題，導致tab欄失效，可以把mui-tab-item改名為mui-tab-item-llb，並復制相關的類樣式，來解決這個問題。

3/17更改

整個demo寫完后，才注意到使用第一種方案后vue-router的linkActiveClass失效，還是改回了第二種方案。

看來還是router-link身上的類名和MUI的tab上的class存在兼容問題