vue项目使用mui导致菜单栏路由失效及其后续mui选项卡点击导致路由跳转部分问题

今天写一个vue项目出现了一个问题然后后续出现了好几个问题

一开始具体问题是：vue使用mui的横向tabber选项卡并使用区域滚动之后导致底部app.vue的底部菜单栏路由无法跳转

查到博客：https://blog.csdn.net/Arbort_/article/details/80882844

里面介绍了菜单栏不能跳转的问题，确实也是我遇到的问题

这个需要在app.vue（是app.vue！！！别问我为什么要强调）里面加上

mui(“body”).on(“tap”,“a”,function(){document.location.href=this.href;});（写在生命周期mounted里）

这么一段代码，底部菜单栏就可以进行路由跳转了

但是还有一个经常见到的报错

这个是因为浏览器自带的啥冲突忘记了，好像是滑动会触发浏览器自带的一个什么事件（自己详查，这个报错会经常见到）

在style里面加上
（这个报错我自己知道怎么解决）
*｛
touch-active:none
｝

就好了，这个好像是阻止浏览器默认的事件

然后发现又错了，mui的横向滚动选项卡点击无效了！！！！！！！！！！！！！

仔细查了一下发现这个横向滚动tabbar把我的路由改了

我正确的路由应该是：

点击横向滚动tabbar后的路由是：

于是倍感诧异，以为是路由出了问题，但是查半天之后才发现这个根本没加不需要加路由（大意了）

再回忆，这部分是之前就写好了的，不应该出问题，于是我怀疑刚刚加的那串解决底部路由跳转的代码了，注释一下发现，还真是串代码的问题！！！！！！！

仔细查了一下博客，并没有我出现的相关问题，于是我仔细检查了一下我mui横向滚动tabbar的代码发现

我尼玛远在天边近在眼前啊，a标签的href不就是我刚才错误路由的地址吗？？？？？？？？

不过这个情有可原，因为是mui已经封装好的，之前使用也没出现路由跳转和其他问题，不过这个问题确实找了一段时间

我的思路：
1：阻止a标签默认的点击跳转事件

href=“javascript:void(0)”

我把使用这方法阻止了跳转，发现路由正常了，但是选项卡下面对应的内容部分没有渲染了，所以这方法pass掉！

2：依然是阻止跳转

a标签删除href属性

发现这样点击默认跳转到项目打开时的默认首页，所以也pass掉！

3：思考了一下，因为是

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

这串代码的原因，里面刚好有一个“a”标签的参数，那么删掉这个参数怎么样呢？

页面正常了不过报错：

得劲儿哈，这方法行不通！

4：我最不愿意用的，就是这个问题的本质是因为a标签的跳转与加上的那串代码冲突导致的路由跳转，a标签阻止跳转不行，改后面那串代码也不行，那么把a标签改一下行不行？之所以不愿意用，是因为这是mui已经封装好了的，我担心改掉a标签后当前组件会出现一系列问题，不过没办法了想不出别的方法，于是我把a标签改成同为行内元素的span标签

于是成了！！！！

效果出来了，没大毛病就是页面无法滑动了，哈哈哈我尼玛，解决一个来一个，解决一个再来一个

问题不大我知道原因，是因为
*｛
touch-active:none
｝
这串代码的原因，touch-active属性值改成pan-y就好了，之所以前面没这样写是因为我刚开始把这个代码写错在别的文件里面去了，所以前面才强调一定要细心不要写错位置。

本人技术现在还不成熟，大牛如果发现有啥不足之处，恳请评论指出来，感谢！

所以，好汉们告辞！！！！！