| 1 | <template>
|
| 2 | <RouterLink
|
| 3 | v-if="isInternal"
|
| 4 | class="nav-link"
|
| 5 | :to="link"
|
| 6 | :exact="exact"
|
| 7 | @focusout.native="focusoutAction"
|
| 8 | >
|
| 9 | {{ item.text }}
|
| 10 | </RouterLink>
|
| 11 | <a
|
| 12 | v-else
|
| 13 | :href="link"
|
| 14 | class="nav-link external"
|
| 15 | :target="target"
|
| 16 | :rel="rel"
|
| 17 | @focusout="focusoutAction"
|
| 18 | >
|
| 19 | {{ item.text }}
|
| 20 | <OutboundLink v-if="isBlankTarget" />
|
| 21 | </a>
|
| 22 | </template>
|
| 23 |
|
| 24 | <script>
|
| 25 | import { isExternal, isMailto, isTel, ensureExt } from '../util'
|
| 26 |
|
| 27 | export default {
|
| 28 | name: 'NavLink',
|
| 29 |
|
| 30 | props: {
|
| 31 | item: {
|
| 32 | required: true
|
| 33 | }
|
| 34 | },
|
| 35 |
|
| 36 | computed: {
|
| 37 | link () {
|
| 38 | return ensureExt(this.item.link)
|
| 39 | },
|
| 40 |
|
| 41 | exact () {
|
| 42 | if (this.$site.locales) {
|
| 43 | return Object.keys(this.$site.locales).some(rootLink => rootLink === this.link)
|
| 44 | }
|
| 45 | return this.link === '/'
|
| 46 | },
|
| 47 |
|
| 48 | isNonHttpURI () {
|
| 49 | return isMailto(this.link) || isTel(this.link)
|
| 50 | },
|
| 51 |
|
| 52 | isBlankTarget () {
|
| 53 | return this.target === '_blank'
|
| 54 | },
|
| 55 |
|
| 56 | isInternal () {
|
| 57 | return !isExternal(this.link) && !this.isBlankTarget
|
| 58 | },
|
| 59 |
|
| 60 | target () {
|
| 61 | if (this.isNonHttpURI) {
|
| 62 | return null
|
| 63 | }
|
| 64 | if (this.item.target) {
|
| 65 | return this.item.target
|
| 66 | }
|
| 67 | return isExternal(this.link) ? '_blank' : ''
|
| 68 | },
|
| 69 |
|
| 70 | rel () {
|
| 71 | if (this.isNonHttpURI) {
|
| 72 | return null
|
| 73 | }
|
| 74 | if (this.item.rel === false) {
|
| 75 | return null
|
| 76 | }
|
| 77 | if (this.item.rel) {
|
| 78 | return this.item.rel
|
| 79 | }
|
| 80 | return this.isBlankTarget ? 'noopener noreferrer' : null
|
| 81 | }
|
| 82 | },
|
| 83 |
|
| 84 | methods: {
|
| 85 | focusoutAction () {
|
| 86 | this.$emit('focusout')
|
| 87 | }
|
| 88 | }
|
| 89 | }
|
| 90 | </script>
|