vue——超详细的美食杰项目—菜谱大全

效果介绍

下面我们实现的效果就是图一中的。点击‘家常菜谱’下的其中一项时背景颜色改变并向路由中显示参数。在点击‘中华小吃’时‘家常菜谱’选中的将会失效。是一个类似Tab切换的效果。
还有就是我们的筛选一项，点击‘工艺’的其中一项，再点‘口味’和‘难度’中的选项时，所有被点击的选项背景样式并不会消失并且路由中也有被点击的参数。
通过我们的筛选的条件对应出菜谱图，还有加载时使用到了element UI的loading加载图，还有数据在加载时或加载完成之后v-show分页的显示和隐藏

这些路由参数是被点击选项时所对应的参数

以下步骤都是在recipe.vue组件中实现

---

1.家常菜谱Tab切换：

首先获取后端api中的数据，在data中声明一个classify数组把后端获取的数据放入classify中在对应的是咧种进行渲染数据。

下图中循环的item.list是根据我们后端获取的data数据中的list

在子级路由中的router-link做一些跳转的功能。当然在跳转的时候路由中的参数也要发生变化。所以我们可以绑定to来对跳转时对参数做一些操作，在对路由进行watch监听路由变化。

首先在data中对父级路由和子级路由做一个默认的参数。当然要在对应的实例中v-model绑定data中父级路由和子级路由的默认参数。随后在watch中获取路由中的query赋值给classify，在对classify做传参判断。背景颜色是根据点击时对应的路由参数而做的改变

2.筛选：

还是先获取后端api中对应的数据getProperty，并赋值给property数组。获取完数据我们还要对数据进行分类存入一个新的propertype对象中。在HTML中循环渲染property数组。

渲染完成之后，我们要对工艺下的选项做一些被点击时对应的路由传参和改变背景颜色的效果。所以要对子级标签做一个点击事件selectedTag。再selectedTag函数中对路由中的query进行解析赋值，在对propertype中的title值和传入的option的type值进行对比。如果有的话，title为空并删除，如果没有则赋值给它并传入对应的参数。

背景颜色的改变也是对propertype中的title值和option的type值进行对比显示。

<script>
import MenuCard from "@/components/menu-card.vue";
import {
    getClassify, getProperty, getMenus } from "@/service/api";

export default {
   
  components: {
    MenuCard },
  data() {
   
    return {
   
      classify: [],
      property: [],
      propertype: {
   }, //存储分类的属性
      classifyType: "1-1", //子级
      classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。
      propertyActiveName: [],
    };
  },
  watch: {
   
    $route: {
   
      handler() {
   
        const {
    classify } = this.$route.query;
        if (classify) {
   
          this.classifyType = classify;
          this.classifyName = classify[0];
        }
      },
      immediate: true,
    },
  },
  mounted