Nuxt.jsのroutingの仕組みの基本

2021年6月24日Vue.js

Nuxt.jsのroutingの仕組みの基本的なことをまとめました。

Nuxt.jsのroutingの仕組み

Nuxt.jsが通常のVue.jsと最も異なる点の一つとして、フォルダとファイルによるroutingの設定があります。 通常、Vue.jsを使った場合、routingはpathとcomponentを設定しますが、Nuxt.jsではその必要がありません。 その代わり、pathはフォルダとファイルによって決定されます。

{
path: '/',
component: Home
},

というコンポーネントであれば、 Nuxt.jsでは、 pages/のフォルダのindex.vue が同義となります。

{
path: '/carts',
component: Carts
},

というコンポーネントであれば、 pages/cartsフォルダのindex.vue が同義となります。

{
path: '/products/:id',
component: Products
},

というコンポーネントであれば、 動的なidであれば、 pages/products/_idというフォルダのindex.vue が同義になります。 このように、フォルダとファイルの構造がそのままurlに変換されます。

二通りのrouting指定方法

Nuxt.jsでのroutingには大きく二通りのrouting指定方法があります。 上のケースをみてみましょう。 pagesフォルダの中に、products.vueがあります。 これのpathは、/productsになります。 また、pagesフォルダの中に、さらにproductsフォルダがあります。 その中に、index.vueがあります。 これもpathは/productsになります。 これが二通りの指定方法です。 個人やチームでどちらにするか決めてから作成したほうがいいでしょう。