[LINUX] Things to watch out for when naming dynamic routing in nuxt.js

Precautions when using the dynamic routing function of nuxt

Conclusion

It is better not to name the page or directory you want to dynamically route with mixed capital letters

environment

nuxt: 2.14.0 macOS Catalina Linux:

Contents

If the name of the page or directory you want to rename dynamically is mixed with uppercase letters, it will be treated as uppercase on the mac side, but on linux it will be treated as all lowercase letters. So, even if you develop it on mac and it works well, it may not work if you run it on production linux. Example: _categoryName / _itemId.vue If you do it with the name, I think that you will write as follows when flying with nuxt-link or $ router.push on this page

.vue

<nuxt-link :to="{ name: {categoryName: 'AAA', itemId: 'BBB'} }">
  hoge
</nuxt-link>

.js

this.$router.push({ name: {categoryName: 'AAA', itemId: 'BBB'} } })

It works well in a mac environment. However, if this is a linux environment used in a production environment etc., the name of the parameter will be

categoryName　→ categoryname
itemId → itemid

It doesn't work because it is treated as all lowercase letters like. (You can see it by directly typing the url of the corresponding page and outputting this. $ Route.params) I'm trying to give a value for a parameter, but it feels like an error occurs because the key for that parameter doesn't exist at the destination.

In general ** "mac is not case sensitive & Linux is sensitive" **, so it is a strange behavior, but it was reported above.

If you find it helpful, please LGTM! !!