美食杰----菜谱大全

今天我们来写美食杰的菜谱大全页面，首先要讲的是实现这个页面的流程：

拿到数据----渲染数据----监听路由传参----判断----写点击事件

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-pane
        v-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 }"