如何在VueJS中美化网址

Question

我有一个带有使用Express api的VueJS前端的基本SPA。

当前我的资源路线类似于.../users/:id

但是，而不是例如.../users/1,

我想要.../users/sam-smith

我该怎么做？

Answer 1

:id只是参数，您可以将其更改为所需的任何内容，但是您需要在任何地方进行更改。

假设您有这样的用户：

[
  { id: 1, userName: 'Alice' },
  { id: 2, userName: 'Bob' }
]

然后路由...users/:id调用类似GET ...backend/users/:id的东西，这可能调用类似DB.getUserById(id)的东西-这是一种很好的方法，因为它可以避免冲突-例如所有用途都会有不同的id。 
[如果您要更改此设置-您应该一路更改，例如：...users/:userName-> ...backend/users/:userName-> DB.getUserByUserName(userName)。最重要的是-您应该确保所有用户都具有
不同的用户名以避免冲突。