vue-cli结合mui 底部选项卡链接跳转不了

MUI底部选项卡链接跳转不了
问题描述:
用MUI例子中的选项卡,底部的导航只能实现div切换,链接无法跳转。

查看控制台,输出:Unable to preventDefault inside passive event listener due to target 的警告。

问题解决:
经检查相关资料,加入以下代码,即可解决问题。

mui(‘body’).on(‘tap’,‘a’,function(){document.location.href=this.href;});

问题原因:
MUI在选项卡中的文字中已说明:

通过DIV模拟一个独立页面,通过DIV的显示、隐藏模拟不同页面的切换,典型的SPA模式;

所以默认的选项卡只适用于页面内多个div切换显示,如要做页面跳转,则需要加javaScript代码修改浏览器地址。

手机版加入代码:

mui(‘body’).on(‘tap’,‘a’,function(){document.location.href=this.href;});

电脑版加入代码:

mui(‘body’).on(‘click’,‘a’,function(){document.location.href=this.href;});

引申:
为什么手机中要用trap,而不和电脑一样的click事件。

首先两者都会在点击时触发,但是在手机web端,click会有 200~300 ms,所以请用tap代替click作为点击事件。但在本次问题中,在手机web端使用click,也能实现跳转,并无影响

你可能感兴趣的:(vue,vue,mui)