这篇文章接着续写上一篇菜谱大全，这篇文章主要写的是右边的侧栏部分。
一.思路：1.首先布局，要用到Element Ui组件来布局。
2.然后从后端获取数据。
3.将调用到的数据进行解构，再创建个空数组，将要用的数据保存的新建的数组里。
4.渲染数据。
5.实现Loading加载事件。
6.实现页码跳转效果，点击相应的代码，出现内容。
7.tab切换，实现一级，二级路由跳转。
二.接下来展示效果：
三.代码展示：
<template><div class="recipe"><!-- v-model="activeName" --><!-- 菜谱分类 start --><el-tabs v-model="classifyName" type="border-card" @tab-click="tabClick"><el-tab-panev-for="item in classify":key="item.parent_type":label="item.parent_name":name="item.parent_type"><div class="recipe-link"><router-link:to="{query: { ...$router.query, classify: option.type, page: 1 },}"v-for="option in item.list":key="option.type":class="{ active: classifyType === option.type }">{{ option.name }}</router-link></div></el-tab-pane></el-tabs><!-- 菜谱分类 end --><h2>家常好味道，给你家一般的温暖</h2><!-- 容器 --><!-- 左侧列表 --><!-- 右侧显示 --><!-- 容器 --><el-container><el-aside width="220px" class="recipe-aside"><div class="filter-box"><h4>筛选</h4><!-- v-model="activeName" --><!-- 筛选 start --><el-collapse v-model="propertiesActivName"><el-collapse-itemv-for="item in properties":key="item.parent_type":title="item.parent_name":name="item.parent_type"><div class="filter-tags"><el-tagtype="info"v-for="option in item.list":key="option.type"@click="selectedTag(option)":class="{'tag-selected': propertyType[option.title] === option.type,}">{{ option.name }}</el-tag></div></el-collapse-item></el-collapse><!-- 筛选 end --></div></el-aside><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-paginationstyle="display: inline-block;":page-size="10"layout="total, prev, pager, next":total="total":current-page.sync="page"@current-change="handlerSelect":hide-on-single-page="true"></el-pagination></div></el-main></el-container></div></template><script>import MenuCard from "@/components/menu-card.vue";import { getClassify, getProperty, getMenus } from "@/service/api";// import { callbackify } from 'util';export default {components: { MenuCard },data() {return {classify: [], //存储tab切换的所有数据classifyType: "1-1", //tab切换的选中项(二级路由)，里面存的谁，谁就是点击项让谁发生改变classifyName: "1", //定义刷新tab时的值（一级路由）// 属性：properties: [], //存储属性中的所有数据propertyType: {}, //存储属性的分类，例如：{craft：1-4，flavor=2-1}propertiesActivName: [], //记录所有的属性分类list: [], //存储右侧主体total: 0, //总页数loading: false, //是否显示遮罩层page: 1,};},watch: {$route: {handler() {const { classify, page } = this.$route.query; //luif (classify) {this.classifyType = classify; //存好的二级在这里 1-1this.classifyName = classify[0]; //这样就变为一级 1this.page = Number(page);}this.getMenuss(); //这里需要改},immediate: true,},},mounted() {getClassify().then(({ data }) => {// console.log(data);this.classify = data;if (!this.$route.query.classify) {this.classifyType = this.classify[0].list[0].type; //存好的二级在这里 1-1this.classifyName = classify[0].parent_type; //1this.$route.push({query: {classify: this.classifyType,page: 1,},});}});getProperty().then(({ data }) => {// console.log(data);this.properties = data;const { query } = this.$route; // {craft:'1-1',flavor: '2-1',hard: '3-2' }//传递空对象，来保存每次的参数值this.propertyType = this.properties.reduce((o, item) => {//item.title 工艺，难度，口味，人数o[item.title] = query[item.title] ? query[item.title] : "";if (o[item.title]) {this.propertiesActivName.push(o[item.title][0]);}return o;}, {});// console.log(this.propertyType);});},methods: {selectedTag(option) {let query = { ...this.$route.query };//判断是否点击，如果点击过：取消，否则，选中if (this.propertyType[option.title] === option.type) {this.propertyType[option.title] = "";delete query[option.title];} else {this.propertyType[option.title] = option.type;query[option.title] = option.type;}// 地址栏记录选中的属性this.$router.push({query,});},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;this.$nextTick(() => {loading = this.$loading({target: ".filter-menus-box",text: "Loading...",spinner: "el-icon-loading",background: "rgba(0,0,0,0.7)",});});this.list = [];//请求右侧数据getMenus(params).then(({ data }) => {if (this.loading) {loading.close();}this.loading = false;this.list = data.list;this.total = data.total;this.page = data.current_page;});},handlerSelect() {this.$router.push({query: {...this.$route.query,page: this.page,},});},tabClick() {const classifName = this.classifyName;const item = this.classify.find((item) => item.parent_type === classifName);//item是当前被点击到的一级路由（整体数据）if (item) {this.classifyName = item.parent_type;this.classifyType = item.list[0].type;this.$router.push({query: {...this.$route.query,classify: this.classifyType,},});}},},};</script><style lang="stylus">.recipe-linkfont-size 0;margin-top 5pxadisplay inline-blockfont-size 12pxpadding 0px 8pxheight 28pxline-height 28px.activebackground #ff3232color #fff.recipeh2text-align centerline-height 150px.el-mainpadding 0.filter-boxbackground #fffpadding 10pxwidth 100%float leftbox-sizing border-box.filter-tagsdisplay flexflex-wrap wrapjustify-content space-around.tag-selectedbackground-color #ff3232color #fff.menu-emptywidth 100%text-align centerfont-size 20px</style>
以上这篇文章实现的效果就是美食杰----菜谱大全，谢谢大家观看！！！
