如何在 Nuxt 中使路由区分大小写

Question

I use nuxt.js + vue.js. I need to create case sensitivity of routers. I found the following property: caseSensitive. I'm trying to put it into nuxt.config but it doesn't work, the transition is possible by links in upper case. If I directly change the file ~project/.nuxt/router.js, everything works correctly. Help me to figure it out.

  router: {
    extendRoutes (routes) {
      for (let key in routes) {
        routes[key]['caseSensitive'] = true
      }
    }

Answer 1

Your code seems to be good. I have tested it, here is mine :

// nuxt.config.js
router: {
  extendRoutes(routes) {
    for (const key in routes) {
      routes[key].caseSensitive = true
    }
  }
}

To be more accurate, the nuxt documentation allows to customize routes with router.extendRoutes property in nuxt.config.js . As it said, for each route :

The schema of the route should respect the vue-router schema

So you need to look at the documentation of vue-router where you can find the caseSensitive property.

Important note 1 : This option is available for Vue 2.6.0+ available for Nuxt 2.5.0. So Nuxt version must be at least >= 2.5.0.

Important note 2 : Be sure to call the right url and make your cache empty. I had the same issue because when I enter my url into Chrome search input browser, chrome automatically changed it into lowercase. In fact it used history of my previous request and not the request I wanted.