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

标签：tab   方案   编程   eth   老师   方式   pre   push   llb   

问题引入

自己写的小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">
  <router-link to="/home" class="mui-tab-item" @click.prevent="toHome">
    <span class="mui-icon mui-icon-home"></span>
    <span class="mui-tab-label">首页</span>
  </router-link>
</nav>

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

解决方案二

看视频学习的时候，老师的解释是App.vue中的router-link身上的类名和mui-tab-item 存在兼容性问题，导致tab栏失效，可以把mui-tab-item改名为mui-tab-item-llb，并复制相关的类样式，来解决这个问题。

个人还是觉得第一种方案可行度高

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

标签：tab   方案   编程   eth   老师   方式   pre   push   llb   

原文地址：https://www.cnblogs.com/L-xmin/p/12496840.html