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

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

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

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

 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"        
  • 3
    点赞
  • 31
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值