vue项目美食杰--个人信息详情_vue h5 个人信息表单-优快云博客

本文链接：https://blog.youkuaiyun.com/Im_xiaopei/article/details/120657988

本文介绍了在Vue项目中实现美食杰个人信息详情页下半部分的功能，包括tab切换的二级路由实现、根据路由变化渲染数据、使用Element-UI进行切换以及数据请求和模板渲染。在没有数据时，提供提示信息的处理也是功能的一部分。

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

美食杰项目目前已经进行到白热化阶段，我呢是感觉越写越有劲，越写越有意思了，对于一个开发者而言，最开心的事莫过于写出来一些满意的效果了吧。

今日分享接上之前个人信息页，前面已经说过了上半部分，今天分享的就是下半部分的功能（以他人空间为实例，自己空间大致一样），大致东西不是很多，但还是那两句老话没注意细节，上图

今天的任务就是上面两张图中，我画框框的部分的功能和细节的处理。。。

大致介绍：

1.首先tab切换实现上面tab功能，用二级路由来实现。

2.根据路由的切换来渲染不同的数据到相同的模板中。

tab切换

首先得配置路由，使得进入个人空间时展示默认组件，这里使用到路由重定向，然后配置二级路由，可以在tab切换时变换不同组件：

{
            path:'/space',
            name:'space',
            component:() => import ('@/views/user-space/space'),
            redirect:'/space/works',
            children:[
                {
                    path:'works',
                    name:'works',
                    component: () => import('@/views/user-space/menu-list'),
                    meta: {
                        login: true
                    }
                },
                {
                    path: 'fans',
                    name: 'fans',
                    meta: {
                        login: true
                    },
                    component: () => import('@/views/user-space/fans')
                },
                {
                    path: 'following',
                    name: 'following',
                    meta: {
                        login: true