Tip : Navigation links to External Urls

[rab]

Navigation drawers often contain a mix of internal and external links.

The following is working well for me:

// generate nav links as a list of q-items
<q-list>
  <q-item
    v-for="(item,id) in items" :key="id"
    exact
    tag="a"
    :to="item.to"
    :href="item.href"
    :target="item.target||'_'">
    <q-item-section>
      <q-item-label>
        {{ item.label }}
      </q-item-label>
    </q-item-section>
  </q-item>
</q-list>

You then provide data where items have either a to or an href:

// the data
  data () {
    return {
      items: [
        { label: 'One',     to:   '/one'            },
        { label: 'Two',     to:   '/two'            },
        { label: 'Bing',    href: 'http://bing.com' }
      ]
  }}

Please shout if this breaks something I should be aware or if there is an alternative recommended way.

Hope it helps.

[beets]

Useful tip, you could also do something like this:

// generate nav links as a list of q-items
<q-list>
  <q-item
    v-for="(item,id) in items" :key="id"
    exact
    tag="a"
    v-bind="item">
    <q-item-section>
      <q-item-label>
        {{ item.label }}
      </q-item-label>
    </q-item-section>
  </q-item>
</q-list>

And bind all attributes to the item. Binding unused attributes like label usually isn’t a problem, if you wanted could also do:

// the data
  data () {
    return {
      items: [
        { label: 'One',     attrs: { to:   '/one'  }          },
        { label: 'Two',     attrs: { to:   '/two'  }         },
        { label: 'Bing',    attrs: { href: 'http://bing.com', target: '_blank' } }
      ]
  }}

And v-bind="item.attrs"