如何在 Nuxt 中使路由区分大小写 [英] How to make routes case sensitive in Nuxt

问题描述

我使用 nuxt.js + vue.js.我需要创建路由器的区分大小写.我发现了以下属性:caseSensitive.我试图将它放入 nuxt.config 但它不起作用，可以通过大写链接进行转换.如果我直接更改文件 ~project/.nuxt/router.js，一切正常.帮我弄清楚.

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
      }
    }

推荐答案

你的代码看起来不错.我已经测试过了，这是我的:

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
    }
  }
}

更准确地说，nuxt 文档 允许使用 nuxt.config.js 中的 router.extendRoutes 属性自定义路由.正如它所说，对于每条路线:

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 :

路由的 schema 应该遵循 vue-router schema

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

所以需要看vue-router的文档您可以在其中找到 caseSensitive 属性.

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

重要说明 1:此选项适用于 Vue 2.6.0+，适用于 Nuxt 2.5.0.所以 Nuxt 版本必须至少 >= 2.5.0.

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.

重要说明 2 : 请务必调用正确的 url 并使缓存为空.我遇到了同样的问题，因为当我在 Chrome 搜索输入浏览器中输入我的 url 时，chrome 会自动将其更改为小写.事实上，它使用了我之前请求的历史记录，而不是我想要的请求.

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.

这篇关于如何在 Nuxt 中使路由区分大小写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！