title: Can I extend router-link?
body: <p>With Vue.JS, is it possible to extend router-link, or bind an event to it, such that for a particular type of link another action occurs?</p>
  
  <p>What I would like to do is specify some links in my application to pop tabs, whilst others do not; e.g.</p>
  
  <pre><code>&lt;router-link&gt;no tab&lt;/router-link&gt;
  &lt;router-link-tab&gt;router view is updated and a tab is pushed&lt;/router-link-tab&gt;
  </code></pre>
  
  <p>I would like to avoid binding an event to beforeRoute and inspecting for route urls, but appreciate that this might be the only way forward.</p>
  
  <p>This needs to work across the Vue app, like router-link does, and will not be contained within only one component.</p>
  
  <p>Am I going at this backwards? Would there be pitfalls in defining a custom component that triggered a new tab and called <code>router.push</code>, like this? Using RouterLink only to highlight active etc?</p>
  
  <pre><code>Vue.component('router-link-tab', {
    template: `&lt;router-link :to="to" @click.prevent="click"&gt;
                 &lt;slot&gt;&lt;/slot&gt;
               &lt;/router-link&gt;
    `,
    props: {
      to: [String, Object],
    },
    methods:{
      click: function () {
          console.log(this.to);
          this.$router.push(to);
      }
    }
  });
  </code></pre>