links.js

import Vue from 'vue'

// https://vuejs.org/v2/guide/custom-directive.html
Vue.directive('links', {
  // Called only once, when the directive is first bound to the element. This is where you can do one-time setup work.
  bind (el) {
    const navigate = event => {
      const href = event.target.getAttribute('href')
      event.preventDefault()
      if (href && href[0] === '/') {
        this.$router.push(href) // Cannot read property '$router' of undefined
      }
    }

    let links = el.getElementsByTagName('a')

    const addListeners = links => {
      for (let i = 0; i < links.length; i++) {
        const href = links[i].getAttribute('href')
        const target = links[i].getAttribute('target')
        if (href && href[0] !== '/') {
          links[i].insertAdjacentHTML( 'beforeend', '<svg class="external" xmlns="http://www.w3.org/2000/svg" \
            width="14" height="14" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 \
            19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 \
            1.41L19 6.41V10h2V3h-7z"/></svg>')
        }
        // For improved security `rel="noopener"` will be added automatically if target is `_blank`
        // https://github.com/mathiasbynens/rel-noopener/
        if (target && target === '_blank') {
          links[i].setAttribute('rel', 'noopener')
        }
        links[i].addEventListener('click', navigate, false)
      }
    }

    const removeListeners = links => {
      for (let i = 0; i < links.length; i++) {
        links[i].removeEventListener('click', navigate, false)
      }
      links = []
    }

    addListeners(links)

    el.$componentUpdated = () => {
      removeListeners
      Vue.nextTick(() => addListeners(links))
    }

    el.$destroy = () => el.removeEventListener('click', removeListeners(links))
  },

  // Called when the bound element has been inserted into its parent node (this only guarantees parent node presence,
  // not necessarily in-document).
  inserted: () => {},

  // Called after the containing component’s VNode has updated, but possibly before its children have updated.
  // The directive’s value may or may not have changed, but you can skip unnecessary updates by comparing
  // the binding’s current and old values.
  update: () => {},

  // Called after the containing component’s VNode and the VNodes of its children have updated.
  componentUpdated: el => el.$componentUpdated(),

  // Called only once, when the directive is unbound from the element.
  unbind: el => el.$destroy()
})