帶有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
       }
     })
   })
}
}