菜谱大全部分功能简介！！

主要说明：上篇我们写了一、二级路由的实现过程，这次要通过路由跳转的时候，来展示我们的数据。主要就是功能的封装和后台数据的交互，首先是我们点击菜单功能时让它能够展示我们的数据，其次就是数据展示之前的一个加载中的效果，以及我们页码的改变。

效果图如下：

 

 代码如下：

<!-- 右侧显示 -->
<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"
        @current-change="handlerSelect"
        :hide-on-single-page="true"
      >
   </el-pagination>
      <!-- sync跟v-model一样，有双向绑定的效果 -->
   </div>
</el-main>
<script>
import MenuCard from "@/components/menu-card.vue";
import { getClassify, getProperty, getMenus } from "@/service/api";

export default {
  components: { MenuCard },
  data() {
    return {
      classify: [], //存储tab切换的所有数据
      classifyType: "1-1", //tab切换的选中项(二级路由)
      classifyName: "1", //定义刷新tab时的值(一级路由)
      properties: [], //存储属性中的所有数据
      propertType: {}, //存储属性的分类。例如{carft:1-4,flavor=2-1}
      propertyActiveName: [], //记录所有的属性分类
      list: [], //存储右侧主体
      total: 0, //总页数
      loading: false, //加载项 是否显示遮罩层
      page: 1,
    };
  },
  watch: {
    $route: {
      handler() {
        const { classify, page } = this.$route.query;
        if (classify) {
          this.classifyType = classify; //1-1
          this.classifyName = classify[0]; //1
          this.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-1
        this.classifyName = this.classify[0].parent_type; //1
        this.$route.push({
          query: {
            classify: this.classifyType,
            page: 1,
          },
        });
      }
    });
    getProperty().then(({ data }) => {
      console.log(data);
      this.properties = data;
      const { query } = this.$route;
      this.propertType = this.properties.reduce((o, item) => {
        // item.title包含：工艺，口味，难度，人数
        o[item.title] = query[item.title] ? query[item.title] : "";
        if (o[item.title]) {
          this.propertyActiveName.push(o[item.title][0]);
        }
        return o;
      }, {});
    });
  },
  methods: {
    selectedTag(option) {
      let query = { ...this.$route.query };
      // 判断是否点击，如果点击过，取消，否则，选中
      if (this.propertType[option.title] === option.type) {
        this.propertType[option.title] = "";
        delete query[option.title];
      } else {
        this.propertType[option.title] = option.type;
        query[option.title] = option.type;
        console.log(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 = [];
      // 调用的方法(API)  请求右侧的数据
      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>

大致结果是这样，下期再见！