美食杰-菜谱大全右侧主体

根据用户的选择，展示不同的数据

 分页

 在data中定义需要的数组

data() {
    return {
      classify: [],
      property: [],
      propertype: {}, //存储分类的属性
      classifyType: "1-1", //子级
      classifyName: "1", //刷新之后父级路由参数有，而视图没有变化。
      propertyActiveName: [],
      //右侧主体
      list:[],
      total:0,//总页数
      loading:false,//是否显示遮罩层
      page:1//当前页数

    };
  },

在方法里面写入事件

ThisgetMenus() {
      // 获取参数
      const query = { ...this.$route.query };
      const params = {
        // 有的话把页数传过去，没有的话给个默认值1
        page: query.page || 1,
        classify: query.classify,
      };
      // 清除原先的数据
      delete query.page
      delete query.classify
      // 如果query里面有值，就储存
      if(Object.keys(query).length){
        params.property={
        ...query
        }
      }
      this.loading = true;
      let loading = null;
        //设置loading加载的样式
      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 }) => {
        // console.log(data);
        if(this.loading) loading.close();
        // 数据请求成功显示分页
        this.loading=false;
        this.list=data.list
        this.total=data.total
        this.page=data.current_page
        // console.log(this.list);
      });
    },
    handlerSelect(){
      // 点击哪一页，就把哪一页数据存在路由里面
      this.$router.push({
        query:{
          ...this.$route.query,
          page:this.page
        }
      })
    }

在HTML绑定事件

<el-main class="filter-menus-box">
        <!-- 当没有数据的时候，给用户提示或者上网速度慢的时候显示loading加载页面 -->
        <div class="menu-empty"
          v-show="!list.length && !loading"
        >
          暂时没有过滤出菜谱信息，请选择其他的筛选条件
        </div>
        <!-- 传出list数据 -->
        <menu-card style="min-height: 75%" :info="list"></menu-card>
        <!-- 分页器在loading的时候隐藏 -->
        <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>
        </div>
      </el-main>

注意：在watch监听的时候调用获取参数的方法

//在路由变化的时候调用
this.ThisgetMenus();

菜谱大全的全篇代码

<template>
  <div class="recipe">
    <!-- v-model="activeName" -->
    <!-- 菜谱分类 start -->
    <el-tabs v-model="classifyName" 
    type="border-card"
      @tab-click="tabClick"
    >
      <!-- label绑定的是后端的parent_name -->
      <el-tab-pane
        :label="item.parent_name"
        v-for="item in classify"
        :key="item.parent_type"
        :name="item.parent_type"
      >
        <div class="recipe-link">
          <!-- to用于跳转时接收参数 -->
          <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="propertyActiveName">
            <el-collapse-item
              :title="item.parent_name"
              v-for="item in property"
              :key="item.parent_type"
              :name="item.parent_type"
            >
              <div class="filter-tags">
                <el-tag
                  type="info"
                  v-for="option in item.list"
                  :key="option.type"
                  @click="selectedTag(option)"
                  :class="{
                    'tag-selected': propertype[option.title] === option.type,
                  }"
                  >{{ option.name }}</el-tag
                >
              </div>
            </el-collapse-item>
          </el-collapse>
          <!-- 筛选 end -->
        </div>
      </el-aside>


      <el-main class="filter-menus-box">
        <!-- 当没有数据的时候，给用户提示或者上网速度慢的时候显示loading加载页面 -->
        <div class="menu-empty"
          v-show="!list.length && !loading"
        >
          暂时没有过滤出菜谱信息，请选择其他的筛选条件
        </div>
        <!-- 传出list数据 -->
        <menu-card style="min-height: 75%" :info="list"></menu-card>
        <!-- 分页器在loading的时候隐藏 -->
        <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>
        </div>
      </el-main>
    </el-container>
  </div>
</template>
<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: [],
      //右侧主体
      list:[],
      total:0,//总页数
      loading:false,//是否显示遮罩层
      page:1//当前页数

    };
  },
  watch: {
    $route: {
      handler() {
        const { classify,page } = this.$route.query;
        // 判断向路由传参
        if (classify) {
          this.classifyType = classify;
          this.classifyName = classify[0];
          this.page = Number(page)
        }
        //在路由变化的时候调用
        this.ThisgetMenus();
      },
      immediate: true,
    },
  },
  mounted() {
    getClassify().then((data) => {
      // console.log(data);
      this.classify = data.data;
      //   判断query有没有值
      if (!this.$route.query.classify) {
        this.classifyType = this.classify[0].list[0].parent_type;
        this.classifyName = this.classify[0].parent_type;
        this.$router.push({
          query: {
            classify: this.classifyType,
            page: 1,
          },
        });
      }
    });


    getProperty().then((data) => {
      // console.log(data);
      this.property = data.data;
      const { query } = this.$route;
      // 给后端请求的数据做一个分类储存到propertype
      this.propertype = this.property.reduce((o, item) => {
        o[item.title] = query[item.title] ? query[item.title] : "";
        if (o[item.title]) {
          this.propertyActiveName.push(o[item.title][0]);
        }
        return o;
      }, {});
      // console.log(this.propertype);
    });
  },
  methods: {
    selectedTag(option) {
      let query = { ...this.$route.query };
      // 判断在同一个子路由中有样式时再点击一次时在点击别的选项之前的样式则会消失
      if (this.propertype[option.title] === option.type) {
        this.propertype[option.title] = "";
        delete query[option.title];
      } else {
        this.propertype[option.title] = option.type;
        query[option.title] = option.type;
      }
      this.$router.push({
        query,
      });
    },
    ThisgetMenus() {
      // 获取参数
      const query = { ...this.$route.query };
      const params = {
        // 有的话把页数传过去，没有的话给个默认值1
        page: query.page || 1,
        classify: query.classify,
      };
      // 清除原先的数据
      delete query.page
      delete query.classify
      // 如果query里面有值，就储存
      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 }) => {
        // console.log(data);
        if(this.loading) loading.close();
        // 数据请求成功显示分页
        this.loading=false;
        this.list=data.list
        this.total=data.total
        this.page=data.current_page
        // console.log(this.list);
      });
    },
    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);
        console.log(item);
      if(item){
        this.classifyName = item.parent_type;
        this.classifyType = item.list[0].type;
        this.$roter.push({
          query:{
            ...this.$route.query,
            classify:this.classifyType
          }
        })
      }
    }
  }
}
</script>
<style lang="stylus">
.recipe-link {
  font-size: 0;
  margin-top: 5px;


  a {
    display: inline-block;
    font-size: 12px;
    padding: 0px 8px;
    height: 28px;
    line-height: 28px;
  }


  .active {
    background: #ff3232;
    color: #fff;
  }
}


.recipe {
  h2 {
    text-align: center;
    line-height: 150px;
  }


  .el-main {
    padding: 0;
  }


  .filter-box {
    background: #fff;
    padding: 10px;
    width: 100%;
    float: left;
    box-sizing: border-box;
  }
}


.filter-tags {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;


  .tag-selected {
    background-color: #ff3232 !important;
    color: #fff !important;
  }
}


.menu-empty {
  width: 100%;
  text-align: center;
  font-size: 20px;
}
</style>

冲冲冲！