Vue-cli(Vue3.x)でサブディレクトリを作成する

　お知らせにサブディレクトリ作って、色々記事を投稿しようかと思ったんだけど、色々と詰まってしまったのでメモします。サブディレクトリの作り方が当たり前すぎるのかなかなか調べても出てこなくてかなり時間かかった。最初は同じように書いて、ディレクトリを追加してたんだけど、子階層の扱いにならなくて苦労した。環境はここに書いてあります。

実際のコード
参考文献

実際のコード

router/index.js:

const = router [
...>8.cut...
  {
    path: '/blogs',
    name: 'Blogs',
    component: () => import(/* webpackChunkName: "Blogs" */ '../views/Blogs.vue'),
    children: [
      {
        path: '',
        name: 'Blog Root',
        component: () => import(/* webpackChunkName: "BlogIndex" */ '../views/BlogsIndex.vue'),
        meta: { title: 'おしらせ' }
      },
      {
        path: 'hogehoge',
        name: 'hogehoge',
        component: () => import(/* webpackChunkName: "Hogehoge" */ '../views/Hogehoge.vue'),
        meta: { title: 'hoge!' }
      }
    ]
  },
...>8.cut...
]