How to extend Vue Router links in Vue 3

Preface

The <router-link> tag is a great tool for navigating between different pages in your Vue app, but it is not a tool when it comes to navigating to an external link, for that you should use a regular <a> tag. Maybe it's just me, but a lot of the time, I can't be bothered to know the difference. Other times, the link may be dynamic, that is, coming from a database or some user-provided data source. In this case you have no idea if the link is external or internal, and it would be a pain to manually do V-if in every place where this link might be used.

Wouldn't it be nice to just have a single component that handles all internal and external linking? If you’re anything like me, you’re doing this right now.

Thankfully, extending the <router-link> component is pretty straightforward; just wrap it in your own custom component. Let's get started! Let's build an AppLink component that can handle any link, whether external or internal.

AppLink Components

The first thing we should do is make our AppLink component accept all of the same props as a router-link. Why? This way our component's "interface" can mimic Router Link's interface and we won't have yet another API to remember. We can do this by importing RouterLink from Vue Router and spreading its props into the props option of our component.

// AppLink.vue
<script>
import {RouterLink} from 'vue-router'
export default{
  props:{ ...RouterLink.props }
}
</script>

In the template area, we can now create a router link tag and bind all of our component's props to it. We also need to pass in the slot so that the text and markup provided between the tags will appear in the router-link.

// AppLink.vue
<template>
  <router-link v-bind="$props"><slot /></router-link>
</template>

As it stands now, we have handled all internal links. So, what about external links? As mentioned before, external links use the a tag, so let's add that to our template. Like router-link, we should pass the slot. Let's also bind the href to the to attribute.

// AppLink.vue
<template>
  <a :href="to" rel="external nofollow" rel="external nofollow" ><slot/></a>
  <router-link v-bind="$props"><slot/></router-link>
</template>

Cool, that explains internal and external linking! At this point, it’s probably worth noting that the above method only works in Vue 3 due to the inclusion of more than 1 root element).

Now, we just need a conditional to tell us what type of link we are providing to the AppLink. We can create a computed property called isExternal to determine this. First, we check if the value of our to prop is a string. This is necessary because the to prop may be an object, such as is sometimes passed to router-link (ie: to="{name:'RouteNameHere'}" ). We will then check if the string starts with the string http. If both of these conditions are true, then we have ourselves an external link.

// AppLink.vue
<script>
export default{
   //...
  computed:{
    isExternal(){
      return typeof this.to === 'string' && this.to.startsWith('http')
    }
  }
}
</script>

router-link is in the template area, we can now use the isExternal computed prop in a v-if when it is a , otherwise it will display true .

// AppLink.vue
<template>
  <a v-if="isExternal" :href="to" rel="external nofollow" rel="external nofollow" ><slot/></a>
  <router-link v-else v-bind="$props"><slot/></router-link>
</template>

That’s it! We are done! After registering the component globally in your application, you can now use it like this.

// Anywhere in your app
<AppLink :to="[external-or-internal-link]">Click Me</AppLink>

Further flexibility

Open in a new tab

Let's make our AppLink component more useful. Let's say, we want all external links to always open in new tabs. It's very simple. Simply add a target="_blank" to the <a> tag in your component and all external links across your site will now open in new tabs.

// AppLink.vue
<template>
  <a ... target="_blank"><slot/></a>
  ...
</template>

This is the rule you'll probably want to apply to most external links on your site, but if you want any particular external link to open in the same tab, you can tell that link instance to do so with the html target attribute.

<AppLink :to="https://vueschool.io" target="_self">Vue School</AppLink>

Link Security

When you use the target="_blank" attribute to link to a page on another website, you end up exposing your website to performance and security issues.

• The linked page may end up running in the same process as your page. Depending on the page being linked to, this may slow down your own page.
• Another page can also access the original page window through the window.opener property, causing security issues.

For more details on this issue, see this informative post.

The solution to this problem is to give all your external link tags a rel="noopener" attribute. But remember how painful it is to do that…oh wait…we don’t need to do that. We can add it once in our AppLink component and that's it.

// AppLink.vue
<template>
  <a ... rel="noopener"><slot/></a>
  ...
</template>

Unique style for external links

I’ve seen some sites style external links on their site a little differently than links leading to other places on their own site. This can help users better understand how they ended up on a site they had not originally visited. It can be anything from a subtle "external link" icon next to the link to a small warning below the link that says, say, "Links to a third-party site." Implementing this in our component is as simple as adding an external-link class to the a tag in our template and then styling it with CSS or adding an :after sudo-element. You can even add brand new elements to external links, like a Font Awesome icon.

// AppLink.vue
// (must have font awesome font included in project)
<template>
  <a ... class="external-link">
    <slot/> <i class="fas fa-external-link-alt"></i>
  </a>
  ...
</template>

<style scoped>
.external-link i {
  font-size: 0.8em;
  opacity: 0.7;
}
</style>

Summarize

This is just a taste of how you can extend router-link to suit common and special case needs. Additionally, since all of your links are encapsulated in a single component, you can easily update different aspects of all of your links. Can you think of any other useful ways to improve our AppLink component? Do you use a similar approach in your applications and have some wisdom to share?

This is the end of this article on how to extend Vue Router links in Vue 3. For more relevant Vue3 extended Vue Router links content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!