今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程：
拿到数据----渲染数据----监听路由传参----判断----写点击事件
1.在api里面拿到数据getClassify, getProperty, getMenus。
2.再创建个空数组classify存放数据，把数据赋值给data。
3.渲染数据，用v-for渲染数据。
4.在watch里深度监听路由传参。
5.再用if判断，判断是否点击，如果点击过就取消；否则，选中。
6.用@click写点击事件，点击的时候地址栏中的路径也会发生变化。
页面效果展示：
代码展示：
<template><div class="recipe"><!-- v-model="activeName" --><!-- 菜谱分类 start --><el-tabs v-model="classifyName" type="border-card"><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 } }"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">暂时没有过滤出菜谱信息，请选择其他的筛选条件</div>--><menu-card style="min-height: 75%;" :info="list"></menu-card><div style="text-align: right;"><el-paginationstyle="display: inline-block;":page-size="10"layout="total, prev, pager, next":total="50"></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: [], //记录所有的属性分类};},watch: {$route: {handler() {const { classify } = this.$route.query; //luif (classify) {this.classifyType = classify; //存好的二级在这里 1-1this.classifyName = classify[0]; //这样就变为一级 1}this.ThisgetMenus(); },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,});},ThisgetMenus() {const query = { ...this.$route.query };const params = {page: query.page || "1",classify: query.classify,};getMenus(params).then(({ data }) => {console.log(data);});},},};</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>
写到这里就结束了，你看懂了吗？？？
