[vue问题解决]vue <router-link>在浏览器上点击失效（路由不跳转）

问题引入

自己写的小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存在兼容问题