关于切换到移动设备，vue3中点击路由时出现蓝色背景

这个问题，是我最近遇到的。一开始我还以为能在vue里边默认的样式中修改，但排查之后发现并没有。导致我一度以为是vue3出现的bug。因为这个问题在vue2中是没有的。

问题定位：vue3中的路由本质上一定程度上对a标签的封装，因此问题应该定位到a标签上。

问题原因：在移动设备上或者是电脑浏览器模拟移动设备屏幕时，因为很多用户会习惯性地点击链接进行页面导航，为了提供一种视觉反馈，设计者选择在 <a> 标签上显示触摸高亮效果，而且每一个浏览器内核默认的都是不大一样。

解决方法：在点击时对应的样式下加上下面的属性

-webkit-tap-highlight-color:rgba(0,0,0,0);
或
-webkit-tap-highlight-color: transparent;

-webkit-tap-highlight-color 属性在移动设备上主要用于调整触摸元素时的反馈颜色。默认情况下，只有 <a> 标签才会显示触摸高亮效果，其他元素不会显示。

这是因为在移动设备上，很多用户会习惯性地点击链接进行页面导航，为了提供一种视觉反馈，设计者选择在 <a> 标签上显示触摸高亮效果。其他元素可能没有默认的触摸高亮样式，因此需要通过设置 -webkit-tap-highlight-color 属性来自定义触摸反馈颜色。

需要注意的是，-webkit-tap-highlight-color 属性只在 WebKit 内核的浏览器中生效，而在其他浏览器中可能不起作用。

这样就能解决问题了。