md ファイルのパスに合わせて Nuxt のパスも設定する

「Nuxt.js に MarkDown を読み込む」で、Markdownファイルを Vue に流し込むことができました。
今回は、ディレクトリに散らばるmdファイルのパスに合わせたURLにアクセスすると該当ページが表示されるようにします。

例えば、https://bitto.jp/blog/test でアクセスされたら ~/md-contents/blog/test.md を表示したいですね。

動的パスに対応する vue ファイルを作成する

URL が md ファイルまでのパスとして渡されるので、これを元にファイルを取得します。
Nuxt.jsのasyncDataメソッドで受け取ったparams.pathMatchから取得できます。

<template lang="pug">  
.posts-contents  
  article  
    .title.is-1 {{attributes.title}}  
    .markdown-body(v-html="html")  
</template>  
<script>  
  export default {  
    async asyncData({ params }) {  
      const.path = params.pathMatch  
      // URLからパス解決  
      const fileContent = await import(`~/md-contents/${path.replace(/\/$/, '')}.md`)  

      // mdファイルの属性をすべてページのデータとして保持  
      return {  
        ...fileContent,  
        title: fileContent.attributes.title  
      }  
    }  
  }  
</script>  

ソース中の...fileContentが何しているかわからない方は「JS の分割代入」も参考にしてみてください。

これで動的パスから解決できるようになりました。

devモードの場合このまま動作しますが、ホスティングのためにnuxt generateするためには予め md ファイルに対応する全てのパス情報が必要です。

asyncDataはSSR(server side rendering)でコールされるメソッドです。
つまり、サーバ側で実行されてからクライアントに返す情報になるので、nuxt generate時には静的情報となります。

この辺は「sitemap.xml の作成(動的パスへの対処)」で解説予定。