Как сделать prettify URL в VueJS

Question

У меня есть базовый c SPA с VueJS интерфейсом, потребляющим Express api.

В настоящее время мои маршруты ресурсов похожи на .../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). И самое главное - вы должны убедиться, что все пользователи имеют разные имена пользователей , чтобы избежать коллизий.