.vue file router link to external url? - php

Question

I'm making changes to a navigation menu in a .vue file in my laravel application. I'm trying to link to an external url such as https://google.com but if I change the code to an link, the link doesn't show when I compile.
I've tried changing to router-link to an external website, but it didn't work. It tries to go to that as a page /https://google.com
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="/campaigns">
<i class="fal fa-layer-group"></i>
<span>Campaigns</span>
</router-link>
</li>
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="https://google.com">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</router-link>
</li>

Answer 1

It seems like the only way is using
<li class="nav-item" #click="closePanel">
<a href="https://google.com" target="_blank" class="nav-link">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</a>
</li>

Answer 2

One way would be using window.location.href . For e.g
<a href='redirectTo("https://google.com")'>Redirect to google</a>
And on methods defination of redirectTo
methods:{
redirectTo(url){
window.location.href=url;
}
}

Answer 3

You need to understand two things-
router-link doesn't consider external URLs.
router-link can wrap one element.
To fix this, you fill prop to with any value and use an anchor tag inside this, like below-
<li class="nav-item" #click="closePanel">
<router-link class="nav-link" to="https://google.com">
<a href="https://google.com">
<i class="fal fa-layer-group"></i>
<span>External website</span>
</a>
</router-link>
</li>