Generate header navigation with Vue-Router

header.vue

<template>
  <header id="header">
    <ul id="header__nav--list">
      <li v-for="(item, itemKey) in items" :key="itemKey"><router-link :to="item.path" exact>{{item.name}}</router-link></li>
    </ul>
  </header>
</template>

<script>
export default {
  data() {
    return {
      items: []
    };
  },
  created() {
    this.$router.options.routes.forEach(route => {
      this.items.push({
        name: route.name,
        path: route.path
      });
    });
  }
};
</script>

<style lang="scss" scoped>
// Your styles here...
</style>