.vue file router link to external url?

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>

Does this answer your question? [VueJs vue-router linking an external website](https://stackoverflow.com/questions/50633001/vuejs-vue-router-linking-an-external-website) — Neha Soni, Dec 22 '22 at 04:52

score 0 · Answer 1 · answered Jul 07 '19 at 15:14

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>

score 0 · Answer 2 · answered Jul 07 '19 at 15:18

0

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

answered Jul 07 '19 at 15:18

ashok poudel

703
11
28

score 0 · Answer 3 · edited Dec 22 '22 at 11:52

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>

.vue file router link to external url?

3 Answers3