如何在 VueJS 中美化 url

Question

我有一个使用 Express 的 VueJS 前端的基本 SPA 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)。最重要的是 - 您应该确保所有用户都有 不同的用户名 以避免冲突。

如何在 VueJS 中美化 url

How to prettify urls in VueJS

routing

vue.js