Nuxt.jsで動的なリンクを生成してみる

今回はNuxt.jsで動的ルーティングを設定する方法を書きます。

ファイル構成

今回は次のようなURLを設定してみます。

domain/:id/:code/

Nuxt.jsで動的にルーティングを設定する場合は、ファイル名orフォルダ名を_名前という感じで保存します。

今回の場合だと次のようになります。

pages/ 
    _id/
        _code.vue

パラメーターの値を取得

アクセスされたURLのパラメーターはthis.$route.params[“名前”]で取得可能です。

mounted(){
    console.log(this.$route.params["id"])
}

mounted内で取得してaxiosで外部のapiを叩いて記事を取ってくるみたいな処理もできます。