如何在 nuxtjs 的路由中添加@。例如：example.com/@username答案

【问题标题】：how to add @ in route in nuxtjs. e.g: example.com/@username如何在 nuxtjs 的路由中添加@。例如：example.com/@username
【发布时间】：2020-11-03 07:02:39
【问题描述】：

我一直在寻找如何在nuxtjs的动态路由中添加@。

我要实现example.com/@username

我尝试创建一个名为 '@' 的目录，并在其中创建了一个文件 _user.vue 但这会导致 @/username强>

我还尝试在配置中扩展路由器并创建自定义路由，例如

router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'user',
        path: '/(@):username',
        component: resolve(__dirname, 'pages/userProfile.vue')
      })
    }
  },

但 nuxt 正在阻止它并引发错误：

Expected "0" to match "@", but received "%40"

我对此的理解是，它是对 @ 符号和 用户名 进行 url 编码。

我如何实现我想要的输出（在 vue 路由器中可能），如下面的问题中所述

https://github.com/vuejs/vue-router/issues/499

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： vue.js vuejs2 vue-router nuxtjs

【解决方案1】：

Nvm.

我刚刚自己修好了。发布答案以帮助他人；

Nuxt 不支持 nuxt 文件系统路由中的 @_username.vue 路由名称。要实现路由为 example.com/@username 我们需要在路由器对象的 nuxt.config.js 文件中扩展它并将我们的自定义路由定义为

router: {
    extendRoutes(routes, resolve) {
      routes.push({
        name: 'user',
        path: '/@:username',
        component: resolve(__dirname, 'pages/userProfile.vue')
      })
    }
  },

路由的定义和vue router完全一样，因为nuxt实现了vue router。所以这里，

name 属性为路由名称

path 属性是路由路径（prv。我正在尝试它（@）：导致错误的用户名，当我删除括号时它刚刚得到修复）

component属性为页面/组件文件名，可以存在于任何地方，只要设置它存在的文件路径即可。

稍后谢谢我！干杯

【讨论】：