Written by Daniel Kelly


Translator: front end little wise


Source: vueschool

Have a dream, have dry goods, WeChat search [big move world] keep an eye on this washing dishes in the wee hours of the morning.

This paper making https://github.com/qq449245884/xiaozhi has included, has a complete line companies interview examination site, information, and my series of articles.

The

tag is used to jump between pages in a Vue application, but instead of jumping to an external link, we typically use the
tag.

Maybe it’s just me, but a lot of times, I can’t keep up with the difference. Other times, the link may be dynamic, that is, coming from a database or some data source provided by the user. In this case, you simply don’t know if the link is external or internal, and how painful it is to manually do a V-IF at every possible place where a link might be used.

Wouldn’t it be nice to have just one component to handle all the internal and external links?

Fortunately, extending the

component is as simple as wrapping it in our own custom component. OK, we need to build an Applink component to handle links, both external and internal.

AppLinkcomponent

The props for the Applink component include all props for the Router Link. Why is that? This allows the “interface” of our component to mimic the interface of the Router Link without having to remember another API. We can import the routerLink from the Vue Router and deconstruct its props to our component as shown below:

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

In the template, we create the router-link and pass props to it. We also need to pass in slots, which can be used to insert content in the router-link.

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

So far, we’ve dealt with all the internal links, but what about the external links? As mentioned earlier, the external link uses the a tag, so we added it to the template. Like the Router Link, and assign the passed to value to the href.

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

This gives you a handle for both internal and external links, but it’s important to note that this only applies to Vue3 because it contains multiple root elements.

Now, we need a computed property to tell the Applink which link to use, which we’ll call isExternal.

First, we check whether the value of prop is a string. This is necessary because the to attribute may be an object, for example, sometimes passed to the router-link (that is: :to=”{name:’RouteNameHere’}”). We will then check to see if the string begins with an HTTP string. If both conditions are true, then an external link is determined.

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

Once we have the isExternal evaluation property, we can use the v-if to do so, as follows:

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

Done, we can use the Applink component like this.

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

Greater flexibility

Open in a new window

We can add more common features. For example, if we want external links to open in a new window, we can easily do this by adding target=”_blank” to our a TAB.

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

Of course, some external links do not need to be opened in a new window. We can tell the component how to open internal links by specifying target, as shown below:

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

Link security

When we use the target=”_blank” attribute to link to a page on another site, we can end up exposing our site to performance and security issues:

  • Linked pages can eventually run on the same process as the page. Depending on the latest state of the page you are linking to, this may slow down your own page.
  • Another page can also be passed throughwindow.openerProperty accesses the original page window, causing a security risk.

The solution to this problem is to add the rel=”noopener” attribute for all external link tags, since we’re already encapsulated as a component, so we only need to add the a tag inside the component.

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

Unique styles for external links

I’ve seen some sites set up external links on their sites in a slightly different style than the inbound links on their own sites. This helps users better understand that they are jumping to external links.

This style can be anything from a warning icon on a third-party link to the risk of jumping to the user. To do this in our component is as simple as adding an external-link class to the a tag in the template and then styling it differently using CSS:

// 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 bb0 <style scoped>. External-link I {font-size: 0.8em; Opacity: 0.7; } </style>

So that’s the end of the Applink idea, but of course, you can expand it if you need new requirements.

~ over, I am small wisdom, see one thief king went, see you next time!

In order to solve these bugs, I spent a lot of time debugging the log. By the way, I would like to recommend a good bug monitoring tool for youFundebug.

https://vueschol.io/articles/…

communication

Article continuously updated every week, you can search the first big move world 】 【 WeChat time reading, reply [welfare] how a front-end video, waiting for you, in this paper, making https://github.com/qq449245884/xiaozhi has included, welcome Star.