nuxtの動的ルーティングの機能を使う際の注意
結論
動的ルーティングしたいページorディレクトリに大文字混じりの命名をしない方がいい
環境
nuxt: 2.14.0
macOS Catalina
Linux:
内容
動的に名前を変えたいページorディレクトリ の名前に大文字が混じっていると、mac側では大文字扱いされるんですが、linuxだと全部小文字に扱われます。なので、macで開発して上手く行っていても本番のlinuxで動かすと動作しない場合があります
例:_categoryName/_itemId.vue
と言う命名でやっていると、このページにnuxt-linkや$router.pushで飛ぶ際に以下のように書くと思います
<nuxt-link :to="{ name: {categoryName: 'AAA', itemId: 'BBB'} }">
hoge
</nuxt-link>
this.$router.push({ name: {categoryName: 'AAA', itemId: 'BBB'} } })
mac環境だとしっかりこれで動作してくれます。しかし、これを本番環境などで使うlinux環境だとパラメータの名前が
categoryName → categoryname
itemId → itemid
のように全部小文字扱いされているので動作しません。(該当ページのurl直打ちをしてthis.$route.params
を出力するとわかります)
パラメータの値を与えようとしてるのに、与える先にそのパラメータのキーが存在しないからエラーになるって感じですね
一般的に**「macが大文字小文字区別しない&Linuxが区別する」**ので不思議な挙動ですが、以上報告でした
参考になったらLGTMお願いします!!