带有href的VueJS路由器链接无法正常工作

Question

我有这个代码：

<router-link class="xhover" to="/support">
    <span class="icon"><IconHelp /></span>
    <ul class="dropdown-menu nav-menu" ref="help">
        <li><router-link to="/support">Get in contact</router-link></li>
        <li><router-link to="/support/video">Intro Video</router-link></li>
        <li><a href="https://google.com" target="_blank">Help Docs</a></li>
        <li><a href="https://facebook.com/api" target="_blank">API Docs</a></li>
        <li><a href="https://github.com" target="_blank">Github</a></li>
    </ul>
</router-link>

所以基本上它的作用是当用户将鼠标悬停在我网站中的“支持”链接上时，它会显示<ul><li></li>...</ul>项。 我的问题是，当它显示时，用户点击“Help Docs”、“API Docs”或“Github”链接，它会重定向到/support页面，而不是那里的href值。 我认为router-link和href之间存在冲突。

我不知道如何将href放在router-link中。

任何帮助将不胜感激。

谢谢。

Answer 1

似乎<router-link class="xhover" to="/support">覆盖了所有子链接。

以某种方式这样做：

<router-link class="xhover" to="/support"></router-link>
    <span class="icon"><IconHelp /></span>
    <ul class="dropdown-menu nav-menu" ref="help">
        <li><router-link to="/support">Get in contact</router-link></li>
        <li><router-link to="/support/video">Intro Video</router-link></li>
        <li><a href="https://google.com" target="_blank">Help Docs</a></li>
        <li><a href="https://facebook.com/api" target="_blank">API Docs</a></li>
        <li><a href="https://github.com" target="_blank">Github</a></li>
    </ul>

Answer 2

我还提出了这个非常奇怪的错误，在我的情况下，我使用 v-for 来显示菜单部分，并使用 v-if 来定义中性 href 和路由器链接，但我对这个问题的解决方案是做一个查询选择器全部到所有菜单项，并用 hash 和 href 分隔它们，并使用 windows.location 进行重定向

例子

array="[ 
{name: 'Get Domain and Hosting Now !', url: 'http://google.com/', routerLink: false},
{name: 'Login', url: '#login', routerLink: false},
{name: 'Register', url: '#register', routerLink: false}
{name: 'Register', url: '/demo', routerLink: true}
]
     
<ul>
    <li v-for="(item, index) in array" :key="index">
        <a :href="item.url" v-if="item.routerLink == false">{{item.name}}</a>
           <router-link :to="item.url" v-else >{{item.name}}</router-link>
    </li>
</ul>

// JASCRIPT IN VUEJS method
methods: {
openItemMenu(){
let getItemsMenu = document.querySelectorAll('nav ul li a')
   getItemsMenu.forEach(itemMenu => {
     itemMenu.addEventListener('click', (e)=>{
       e.preventDefault()
       if(itemMenu.hash != ''){
         //MY CODE WITH HASH
       }else{
         window.location = itemMenu.href
       }
     })
   })
}
}