在 onBeforeMouted() 上更改 Vue 3 中的 URL？

Question

我目前正在使用 Vue 3 开发社交媒体。

我有一个显示所有帖子的提要页面，每个帖子都有一个评论部分。对于每条评论，都有作者姓名和评论内容。 在我的项目中，作者的名字是这种格式的路由器链接：

<router-link :to="`user/${userId}`"> John Doe </router-link>

基本上，通过单击名称，我会转到用户的个人资料页面。但是，当我到达该页面时，我希望 URL 更改为 /user/nickname 而不是 /user/userId，因为一大堆数字看起来不太好。我想做一个 getUser(id) API 调用（因为我有 ID 感谢参数），它在 onBeforeMounted() 函数上返回用户昵称，但不知道在那之后要做什么。

在此先感谢您的帮助！

Answer 1

试试这个

   <template>
      <div class="hello">
        <router-link :to="`user/${getName(1)}`"> John Doe </router-link>
      </div>
    </template>

 <script setup>
 const getName = async (id) => {
    let name = await getApiName(id)

  return name;
 };
 </script>