问题引入
自己写的小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,并复制相关的类样式,来解决这个问题。
个人还是觉得第一种方案可行度高
原文地址:https://www.cnblogs.com/L-xmin/p/12496840.html
时间: 2024-10-10 20:55:28