这篇文章是根据上篇文章：美食杰，菜谱大全组件中，零碎的组件实现效果（三）_qianluo111的博客-CSDN博客
续写的效果，这个效果是展示右侧的内容通过最上面的tab切换和左边的侧边栏来实现的。右侧的主体的loading加载和显示内容主体。
下面开始讲解一下我们要实现效果的过程啦！
第一步：先实现我们右侧的主体栏的数据。
我们首先要将后端数据获取到，这个就是 import {getMenus} from '@/service/api';
第二步：调用获取到的数据data将其进行解构，看数据请求的数据中有没有参数有参数也要拿过来，保存到我们在新建的空数组list：[ ]中。 this.list =data.list;这样就将数据传给了我们的空数组list中。
getMenus(params).then(({data})=>{
// console.log(data);打印查看一下有没有获取到数据
this.list =data.list;
})
},第三步：渲染数据，将在list：[ ]中的数据进行渲染由于右侧是一个个的组件，所以我们渲染的是一个组件。还要在data中保存一个总页数total：0，单页数page：1。
<el-main class="filter-menus-box" >
<div class="menu-empty" v-show="!list.length && !loading">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>
<menu-card style="min-height: 75%;" :info="list"></menu-card>
<!-- 分页展示 -->
<div style="text-align: right;" v-show="!loading">
<el-pagination
style="display: inline-block;"
:page-size="5"
layout="total, prev, pager, next"
:total="total"
:current-page.sync="page"
>
</el-pagination>
</div>
</el-main>第四步：实现加载loading事件，我们都知道loading事件是在生命周期里挂载之前执行的，所以在调用数据之前要先获取路由参数，然后将请求到的数据params中的page和classify，当页面加载时，下面的分页器随之变动，看数据有几条就显示几个同时分页器展示响应的页数，多余的页数用delete query.page;删除路由参数页数和delete query.classify中tab切换栏中的页数。在进行判断，当前展示的组件的长度是否于页码相等。然后挂载之前显示this.loading=true;显示之后清除let loading=null;
getMenuss(){
const query = {...this.$route.query};
const params={
page:query.page || "1",
classify:query.classify
};
delete query.page;删除多余的页码
delete query.classify删除多余不符合的数据
if (Object.keys(query).length) {//判断组件长度是否于页码长度相等
params.property = {
...query
}
}
this.loading=true;//挂载之前显示
let loading=null;//挂载完毕之后消失
}
第五步：挂载之后，挂载完毕之后我们要用到nextTick（）方法，在我们下一次获取数据的时候需要执行延迟回调。
this.$nextTick(()=>{
loading=this.$loading({//这是我们加载loading时间是要实现的
target:'.filter-menus-box',//找到我们的事件源，也就是我们要有遮盖层的部分，记得class类名的点不能少
text:'Loading...',加载时显示的文本
spinner:'el-icon-loading',//展示转圈圈的图标
background:'rgba(0,0,0,0.7)'//背景颜色的改变
})
});
this.list=[];//挂载之后将list数据存储展示第六步：展示过程，当loading加载前数据不显示，加载完成后在显示。
getMenus(params).then(({data})=>{
if (this.loading) {
loading.close();//数据加载之后将loading事件进行关闭
}
this.loading=false;
// console.log(data);
this.list =data.list;
this.total =data.total;
this.page=data.current_page;//当前组件赋值给页码
})第七步：是页码的实现，点击改变当前页码。通过写一个方法，当点击左侧栏或tab切换栏时监听路由并添加响应的内容。
handlerSelect(){
console.log("改变页码");
this.$router.push({通过路由添加相应的页码和路由参数
query:{
...this.$route.query,
page:this.page
}
})
},第八步：也就是tab切换一二级路由是展示的内容。先将classify中的数据赋值给一个空变量中存起来，然后找到classify中相应的数据。根据路由添加响应的内容。
tabClick(){
const classifName=this.classifyName;//将classifyName定义刷新的tab值赋值给一个空变量
const item=this.classify.find(item => item.parent_type === classifName);//找到classify中的数据存储在item中
// console.log(item);
//item 是当前被点击到的一级路由（整体数据）
if (item) {
this.classifyName=item.parent_type//一级路由
this.classifyType=item.list[0].type
this.$route.push({
query:{
...this.$route.query,
classify:this.classifyType
}
})
}
}这样就实现了我们想要的效果。本片文章主要是讲解了，显示主体，分页器，遮罩层，这些效果运用了element-ui组件，不会使用这个组件的可以去看一下饿了么组件库的官网哦！
这里我把组件库官网的链接拿到了，省了你们去搜索的时间。组件 | Element