美食杰个人空间效果

在美食杰的个人空间中实现子路由点击跳转功能

1.在router里的index文件中配置路由信息

const Fans = ()=> import(/*wbpackChunkName:"space"*/ '@/views/user-space/fans');
const MenuList = ()=> import(/*wbpackChunkName:"space"*/ '@/views/user-space/menu-list');
{
            path: '/space',
            title: '个人空间',
            name: 'space',
            component: Space,
            meta: {
              login: true
            },
            redirect:{
                name:'works'
            },
            children:[
                {
                    path:'/works',
                    name:'works',
                    component:MenuList,
                    meta:{
                        login:true
                    }
                },
                {
                    path:'/fans',
                    name:'fans',
                    component:Fans,
                    meta:{
                        login:true
                    }
                },
                {
                    path:'/following',
                    name:'following',
                    component:Fans,
                    meta:{
                        login:true
                    }
                },
                {
                    path:'/collection',
                    name:'collection',
                    component:MenuList,
                    meta:{
                        login:true
                    }
                }
            ]
        }

2.在个人空间配置页中通过router-view来进行路由跳转切换

<el-tabs class="user-nav" v-model="activeName" @tab-click="tabClickHandler">
      <el-tab-pane label="作品" name="works"></el-tab-pane>
      <el-tab-pane label="粉丝" name="fans"></el-tab-pane>
      <el-tab-pane label="关注" name="following"></el-tab-pane>
      <el-tab-pane label="收藏" name="collection"></el-tab-pane>
    </el-tabs>

    <div class="user-info-show">
      <!-- 作品 & 收藏 布局 -->
      <!-- <menu-card :margin-left="13"></menu-card> -->
      <!-- 粉丝 & 关注 布局 -->
      <!-- <Fans></Fans>   -->
      <router-view :info="list" :activeName="activeName"></router-view>
    </div>

3.通过绑定的tab-click事件来配置

tabClickHandler(){
       this.list = [],
       this.$router.push({
         name:this.activeName,
         query:{
           ...this.$route.query
         }
       })
     },