vue项目美食杰 -- 个人信息展示与修改-CSDN博客

本文链接：https://blog.csdn.net/Im_xiaopei/article/details/120476977

本文介绍了在Vue项目中实现个人信息展示与修改的详细步骤，包括通过路由跳转进入个人空间，根据ID判断是否能修改信息，使用ElementUI组件库布局，以及图像上传、名称和简介的修改。此外，还涵盖了关注与取消关注功能的实现，重点讨论了数据处理和组件通信的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天是项目的第三部分，个人信息的展示与修改，在此，笔者只想说，做个项目真的是费劲，但是，越困难的东西写着不是越有意思嘛，毕竟伟大的哲学家‘沃兹基硕德’（我自己说的）：学习就要学不会的东西，要不然学什么习。开个玩笑，步入正题。

老规矩先上效果图，让大家明白今天要写点啥

实现步骤开始了，注意听讲

1.个人资料空间进入

我们登陆之后，头部展示的就是个人信息，要点此进入到个人空间，要使用到路由跳转

 <router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" 
              shape="square"                          
              size="medium" 
              :src="userInfo.avatar"></el-avatar>
 </router-link>
            <router-link :to="{name:'space'}" class="user-name">{
  {userInfo.name}}</router-link>

to属性里的space就是我配置的空间路由，去到的是空间的模板，至此就可以进入了

进入之后展示的就是第一张图里的效果，有个人头像，个人名字，个人的其他信息，等等。。

在此有个问题，就是我进的是别人的空间，还是我自己的空间呢，这个挺重要的，因为空间不同，我们其中的效果也有不同的地方，来看

自己的空间

别人的空间

不同的地方，我已经给大家圈起来了，进入自己空间的时候是可以修改资料的，进别人空间不行，反正我是没见过能改别人资料的，再者，自己的空间没有关注板块，毕竟自己关注自己有点奇怪，别人的空间有吧。

有了问题，就得解决问题，解决办法就是用id来区分呀，我的思路是在进入个人空间时在路由里传递参数，有参数的就是别人的，没有参数的就是我自己的，ok问题解决，具体实现请看：

<router-link :to="{name:'space'}">
              <el-avatar style="vertical-align: middle;" 
              shape="square"                          
              size="medium" 
              :src="userInfo.avatar"></el-avatar>
            </router-link>