The router link tag is a great tool for navigating between different pages of your application, but it is not the tool to use when navigating to an external link. For that, you'd want to use a regular A tag. Oftentimes, though, you don't want to have to keep up with the difference. Other times, with dynamic links coming from a database or something like that, you won't know the difference and what a pain it would be to do a VIF manually to check if it was an external or an internal link every time.
It would be nice to just use a single component for all the links, internal and external. Thankfully, extending the router link component is super simple by wrapping it in your own custom component. Let's do it. Let's build an app link component that will take any link, either external or internal.
In the components directory, let's create a new file. Since it will be a base or reusable component throughout our app, let's prefix it with the word app as suggested by the view style guide. The first thing I want to do is allow our app link component to take all the same props that the router link takes. I can do this by importing router link from view router and spreading its prompts into the props option of our component.
Most importantly, this means our component now has a to prop. In the template area we can now create a router link tag and just bind all the props from our component to it. We can do this because the interface of our component is exactly the same as router links. We also need to pass in the slot.
As is right now, we've handled all internal links. What about external links? As mentioned previously, external links use a tags. So let's add that to our template.
Let's bind the href to the to property. Like router link, we should also pass the slot. Cool. This accounts for both internal links and external links.
Now we just need a condition to tell us which one was provided to the app link. We can create a computed property called isExternal to determine this. First, we'll check that the value of our to prop is a string. This is necessary because the to prop might be an object such as we've used throughout this course when navigating to a route using the property name and then providing the page name.
Then we'll check if the string starts with HTTP. If it does, it's a link to somewhere outside of our application. Now, in the template area, let's use the isExternal computed prop in a vif to show the a tag when it's true, otherwise to show the router link. We're almost ready to use our app link component.
js file with the root view instance. That way, we don't have to import it into each component we want to use it in. All right, moment of truth. Let's open up the navigation component and replace all instances of router link with the new app link.
Let's also add an external link to our navigation so that we can see how external links behave. Awesome. Let's check it out in the browser. Now, when we click an internal link, it navigates like an SPA without the complete page reloads.
But we can also visit an external link with the exact same component, and it works just fine. If you'd like, you can change out all the router links in the Travel app to your new, more flexible app link. This approach can also benefit us in even more ways. Let's say we always wanted our external links to open in a new tab.
Easy. We just add target equals underscore blank to the a tag in our app link. For security's sake, we should also always add the rel attribute with the value of noOpener to external links. Done.
Maybe we want to style all external links and internal links differently. Nothing to it. This is just a taste of what you can do to extend RouterLink to accommodate common and case specific needs. Also, with all your links encapsulated in a single component, you can easily update different aspects of all your links across your site down the road.