问用nuxt.js重写url

EN

您可以使用在/user/1中声明的middleware配置将middleware重定向到<rootDir>/pages/user/_id.vue。注意，middleware方法接收一个context参数，其中包含两个在您的情况下特别有用的属性：

• params: Object - params.id给出从URL解析的ID (例如，URL /user/222的params.id === '222' )
• redirect: Function -允许您重定向到另一条路线

<rootDir>/pages/user/_id.vue__中的示例用法：

<script>
export default {
  middleware({ params, redirect }) {
    if (params.id === '1') {
      redirect('/users/alex')
    } else {
      redirect('/users/bob')
    }
  }
}
</script>

有一个Nuxt.js重定向模块。

链接在这里

但我认为，由于不建议您尝试“重写”URL，您要做的是更改URL的标识符，因此API从ID中找到用户的用户名或名称。

在这个场景中，您必须修改指向用户的链接并设置如下内容。

<nuxt-link :to="`/user/${currentUser.username}`">My Profile</nuxt-link>

这将是一个类似于"/ user /david“的链接，然后在用户配置文件页面中，您必须使用asyncData来使用用户名而不是ID来获取用户配置文件。

当然，您还必须为此修改后端或API。

我已经为你做了一个代码沙箱，在这里你会看到我在说什么。

两种选择都试一试。

CodeSandbox