vue同一个路由下实现分页功能

vue项目中，我们经常用到了分页的功能，我们经常的做法就是通过不同的路由显示分页的功能。
那么我们要如何实现同一个路由下，不同分页显示的数据也要不同呢？

1.父组件FoodList

vue模板
<template>
<mt-tab-container ref="container" v-model="selectedIndex">
        <mt-tab-container-item
          v-for="(type,index_) in foodType"
          :key="index_"
          :id="tabContainer[index_]"
        >
          <Food v-for="(food,index) in $store.state[type]" :key="index" :food="food"></Food>
        </mt-tab-container-item>
 </mt-tab-container>
 <template>
 js部分
 <script>
import Food from "@/components/food";
import { mapState } from "vuex";
export default {
 data() {
    return {
      tabContainer: [
        "tab-container1",
        "tab-container2",
        "tab-container3",
        "tab-container4",
        "tab-container5",
      ],
    };
  },
  components: {
    Food,
  },
  computed: {
    ...mapState(["fruits", "foodType"]),
    selectedIndex: {
      get() {
        return `tab-container${this.$store.state.selectedIndex + 1}`;
      },
      set(val) {
        return `tab-container${this.$store.state.selectedIndex + 1}`;
      },
    },
  },
  </script>

在data属性中，我定义了5个容器，分别来显示不同的数据，
v-model实现双向数据变化，当我切换分页的时候，对应的容器也会发生变化，父组件中，需要绑定对应的容器id。
vuex中的state状态状态管理：

foodType: ["fruits", "ingredients", "snacks", "milks", "vegetables"], 

子组件：
子组件接收父组件传过来的food属性，从而渲染在界面上

<template>
  <div class="ware">
    <div class="content">
      <img class="thumbnail" :src="food.thumbnail.url" />
      <div class="info">
        <div class="name">{{food.name}}</div>
        <div class="description">{{food.description}}</div>
        <div class="price-tag">
          <span class="price">￥{{food.price}}</span>
          <span class="unit">/1盒</span>
        </div>
        <div class="origin-price">
          超市:
          <del>{{food.originPrice}}元</del>
        </div>
      </div>
      <div class="control">
        <div class="panel">
          <img class="minus" src="/image/minus.png" />
          <div class="count">0</div>
        </div>
        <img class="add" src="/image/add.png " />
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "Food",
  props: {
    food: {
      typed: Object,
      default: function () {
        return {};
      },
    },
  },
};
</script>

至于不同分页获取不同的数据，可以定义每个分页一个下标，结合下标，再通过axios实现不同分页不同数据。（涉及的代码过长，就不一一贴出来，有想了解的小伙伴可以联系我哟！）