ant-design-vue的奇怪bug＜a-menu＞

不知道为什么在做头部导航栏时，想在导航栏靠右侧加一个登录a标签，却发生了如图的bug

原先的导航栏

层级结构类似为

<a-menu
       
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
      
        <a-menu-item key="/home">  
            首页   
        </a-menu-item>
         <a-menu-item key="/about">
              关于我们
        </a-menu-item>
</a-menu>

加个a标签

<a-menu
       
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
         
            <a-menu-item key="/home">  
                首页   
            </a-menu-item>
             <a-menu-item key="/about">
                  关于我们
            </a-menu-item>
         
       
            <a  class="login-menu">
                <span>登录</span>
            </a>
       
</a-menu>

就出现了a标签显示两遍且在最前面显示的问题。

笔者百思不得其解，大概问题应该就出在版本上了，笔者用button代替a标签，发现依然存在这样的问题。也就是这个版本存在<a-menu>如果嵌套除<a-menu-item>别的标签，就会重复两遍。

笔者的版本不能动，因为一些标签是这个版本对应的，防止出现其他bug，只能用document手动清除。以下是解决办法。（非常希望看到这的大佬如果能看出我不是版本问题，或者有更好的解决办法能够提出来）

首先样式，我们用两个div，分别嵌套，这样就可以使<a>和<a-menu-item>标签互不影响

<a-menu
       
        theme="dark"
        mode="horizontal"
        :style="{ lineHeight: '64px' }"
      >
         <div>
            <a-menu-item key="/home">  
                首页   
            </a-menu-item>
             <a-menu-item key="/about">
                  关于我们
            </a-menu-item>
         </div>
        <div class="unque">
            <a  class="login-menu">
                <span>登录</span>
            </a>
        </div>
</a-menu>

给<a>样式设置右浮动，父div一定设置具体宽度

 .unque{
    width:700px !important
  }
 .unque .login-menu {
    float: right !important;
    color: white !important;
    padding-right: 10px;
   
  }

然后我们就来手动清除document结点，肯定是在onMounted函数中。注意不是清除a,而是清除整个div。

  onMounted(()=>{
    let elements=document.getElementsByClassName("unque") 
    elements[0].remove();    
  })

运行一下就发现可以了