vue-routerとコンポーネントファイルだけでページを量産する ref: https://qiita.com/sakadon/items/d1e0d1ee0e93d1b4b086

Breadcrumb.vue

<template lang="pug">
  nav
    ul
      li
        router-link(to="/")
          | HOME
      li(v-for="list in breadcrumbs")
        router-link(v-bind:to="list.path")
          | {{ list.name }}
</template>
<script>
  export default {
    name: 'Breadcrumb',
    props: [
      'breadcrumbs'
    ]
  };
</script>

index.js

import Vue from 'vue';
import Router from 'vue-router';

// 普通のページ
import Top from '@/layouts/Top';

// 量産型ページ
import SinglePage from '@/layouts/SinglePage';
import SectionOne from '@/components/SectionOne';
import SectionTwo from '@/components/SectionTwo';
import PageNotFound from '@/components/PageNotFound';

Vue.use(Router);

export default new Router({
  mode: 'history',
  routes: [
    {
      path: '/',
      name: 'Top',
      component: Top,
    },
    {
      path: '*',
      component: SinglePage,
      children: [
        {
          path: '/sec1',
          component: SectionOne,
          meta: {
            title: 'うんこパラダイス',
            breadcrumbs: [
              {
                path: '/sec1',
                name: 'うんこパラダイス',
              },
            ],
          },
        },
        {
          path: '/sec2',
          component: SectionTwo,
          meta: {
            title: 'ちんちんぶらぶら',
            breadcrumbs: [
              {
                path: '/hoge',
                name: 'ほげ',
              },
              {
                path: '/sec2',
                name: 'ちんちんぶらぶら',
              },
            ],
          },
        },
        {
          // ちなみにこれステータスが２００になるから注意な
          path: '*', // 見つかりません的な
          component: PageNotFound,
        },
      ],
    },
  ],
});

PageNotFound.vue

<template lang="pug">
　　section
　　　　h2 名称未設定
  p ...
</template>
<script>
  export default {
    name: 'PageNotFound',
  };
</script>

SectionOne.vue

<template lang="pug">
　　section
　　　　h2 うんこはえいえんのともだち
  p ...
</template>
<script>
  export default {
    name: 'SectionOne',
  };
</script>

SectionTwo.vue

<template lang="pug">
　　section
　　　　h2 ひろでんでんしゃでちんちんぶらぶら
  p ...
</template>
<script>
  export default {
    name: 'SectionTwo',
  };
</script>

SinglePage.vue

<template lang="pug">
  .page
    Header

    Breadcrumb(v-bind:breadcrumbs="breadcrumbs")

    article
      .title
        h1
          | {{ title }}

      router-view

    Footer
</template>

<script>
  import Header from '@/components/Header';
  import Breadcrumb from '@/components/Breadcrumb';
  import Footer from '@/components/Footer';

  export default {
    name: 'SinglePage',
    components: {
      Header,
      Breadcrumb,
      Footer,
    },
    computed: {
      title() {
        // タイトルがvue-routerのmetaフィールドで指定されているか調べる
        if( this.$route.matched.some( obj => obj.meta.title ) ){
          // 存在するなら使う
          return this.$route.meta.title
        }
        // ない場合
        return '表題無設定'
      },
      breadcrumbs() {
        // パンくずの定義がvue-routerのmetaフィールドでされているか調べる
        if( this.$route.matched.some( obj => obj.meta.breadcrumbs ) ){
          // 存在するなら使う
          return this.$route.meta.breadcrumbs
        }
        // ない場合は、HOMEとだけ表示させる
        return
      }
    },
  };
</script>