3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

nuxt.jsの動的ルーティングの命名で気をつけた方がいいこと

Posted at

nuxtの動的ルーティングの機能を使う際の注意

結論

動的ルーティングしたいページorディレクトリに大文字混じりの命名をしない方がいい

環境

nuxt: 2.14.0
macOS Catalina
Linux:

内容

動的に名前を変えたいページorディレクトリ の名前に大文字が混じっていると、mac側では大文字扱いされるんですが、linuxだと全部小文字に扱われます。なので、macで開発して上手く行っていても本番のlinuxで動かすと動作しない場合があります
例:_categoryName/_itemId.vue
と言う命名でやっていると、このページにnuxt-linkや$router.pushで飛ぶ際に以下のように書くと思います

.vue
<nuxt-link :to="{ name: {categoryName: 'AAA', itemId: 'BBB'} }">
  hoge
</nuxt-link>
.js
this.$router.push({ name: {categoryName: 'AAA', itemId: 'BBB'} } })

mac環境だとしっかりこれで動作してくれます。しかし、これを本番環境などで使うlinux環境だとパラメータの名前が

categoryName → categoryname
itemId → itemid

のように全部小文字扱いされているので動作しません。(該当ページのurl直打ちをしてthis.$route.paramsを出力するとわかります)
パラメータの値を与えようとしてるのに、与える先にそのパラメータのキーが存在しないからエラーになるって感じですね

一般的に**「macが大文字小文字区別しない&Linuxが区別する」**ので不思議な挙動ですが、以上報告でした

参考になったらLGTMお願いします!!

3
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?