vue——超详细的美食杰项目—个人信息展示

效果介绍

图一中的123用户是自己的信息，不仅有编辑个人资料还有自己的作品、粉丝、关注、收藏等

图二、图三中显示的用户是别人的个人信息展示，当我们查看别人的个人信息中就没有‘编辑个人资料’这种选项。但是我们也可以看到别人的作品、粉丝、关注、收藏等


好，废话不多说咱开整

---

store文件下的index.js

在路由中的个人信息中配置子路由，然后把作品、粉丝、关注、收藏的组件正常配置就可以。以下代码子路由路径只配置了两个组件的路径

{
   
            path: '/space',//个人信息
            name: "space",
            component: () => import(/* webpackChunkName: "Space" */ '../views/user-space/space.vue'),
            redirect: {
    name: 'works' },
            meta: {
    login: true },
            children: [
                {
   
                    path: 'works',//作品
                    name: "works",
                    component: () => import(/* webpackChunkName: "Works" */ '../views/user-space/menu-list.vue'),
                    meta: {
    login: true },
                },
                {
   
                    path: 'fans',//粉丝
                    name: "fans",
                    component: () => import(/* webpackChunkName: "Fans" */ '../views/user-space/fans.vue'),
                    meta: {
    login: true },
                },
                {
   
                    path: 'following',//关注
                    name: "following",
                    component: () => import(/* webpackChunkName: "Following" */ '../views/user-space/fans.vue'),
                    meta: {
    login: true },
                },
                {
   
                    path: 'collection',//收藏
                    name: "collection",
                    component: () => import(/* webpackChunkName: "Collection" */ '../views/user-space/menu-list.vue'),
                    meta: {
    login: true },
                },
            ]

        },

space.vue

监听路由：
上面图一是进入别人的个人信息中，图二是自己的个人信息。所以可以使用上面图中的userId来判断是否进入的是别人的个人信息页面中。
在data中声明一个名为isflase布尔类型，用watch来监听路由，知道当前进入的页面是否是别人的信息页面。在用isflase来判断如果为flase，userInfo中的信息会从store中去拿信息。如果为true，userInfo则获取当前的用户信息。随后在HTML中进行渲染显示

immediate：初始化时监听，如果为true 代表如果在 wacth 里声明了之后，就会立即先去执行里面的handler方法

关注：
在HTML中绑定class来对样式进行点击改变。点击事件toggleHandler，获取以下图二中的followUserId，对当前用户点击关注时获取数据，从而对数据整体赋值。实现粉丝数量加一

当前用户的作品、粉丝、关注、收藏显示：
在el-tabs标签中绑定data中的activeName，在自定一个tabClickHandler点击事件。
注意：
这里的点击事件不能直接用@click，因为这里使用了element UI框架，所以在点击事件前加上tab，就可以正常使用了。
点击事件tabClickHandler这里要做的操作是对作品或粉丝中的用户名字是进行路由跳转，里面的query是对作品和粉丝之间来回跳转的路由参数显示例如图二，如果不加的话是图三的效果。

获取数据渲染：
随后在实例外来一个getOtherInfo 对象获取api中的works、following、fans、collection。

调用getOtherInfo 封装的请求进行使用，data中获取的分别是请求的名字和用户信息，最后给data中的list赋值

最后一步：
在路由中把info和activeName传到fans.vue和menu-card组件中使用，用info进行渲染

<script>
import {
   
  userInfo,
  toggleFollowing,
  getMenus,
  following,
  fans,
  collection,
} from "@/service/api";
const getOtherInfo = {
   
  async works(params) {
   
    return (await getMenus(params)).data;
  },
  async following(params) {
   
    return (await following(params)).data;
  },
  async fans(params) {
   
    return (await fans(params)).data;
  }