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

2021/01/28

#Vue.js/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を叩いて記事を取ってくるみたいな処理もできます。


関連記事:Vue.js/Nuxt.js

Nuxt.js + microCMS + Nuxt Contentでブログを作り直してみた

Vue.js/Nuxt.js

[Nuxt.js]動的なルーティングを含めてgenerateする方法

Vue.js/Nuxt.js

[Nuxt.js]nuxt.config.jsに環境変数を定義してプログラムから読み込む方法

Vue.js/Nuxt.js