VueJS Router-link with a href not working properly

Question

I have this code:

<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>

So basically what this does is that it when the user hovers over the "support" link in my website, it will show the <ul><li></li>...</ul> items. My problem here is that when that's being shown, then the user clicks on the "Help Docs", "API Docs", or "Github" link, it redirects to the /support page instead of the value of the href there. I think there's a conflict between the router-link and the href .

I do not know how to put an href inside a router-link .

Any help will be greatly appreciated.

Thanks.

Answer 1

seems like <router-link class="xhover" to="/support"> overrides all the child links.

Do it someway along this manner:

<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

I also present this error which is very strange, in my case I was using a v-for to show menu sections and a v-if in case to define neutral hrefs and router-links, but my solution to that problem was to do a query selector all to all menu items and separate them by hash and href and use windows.location to redirect

Example

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