Vuetify - 使用 URL 参数同步分页

Question

Vuetify 有一个 Data table component，它支持外部分页 + 排序（通过 API）。
将这些与 URL 参数同步的最佳方法是什么（双向绑定）？

---

示例网址：
http://localhost:3000/users?page=22

当我转到此链接时，我希望看到 22 作为分页中的当前页面。 当我单击分页组件中的 Next 按钮时，我希望看到 URL 更新为 http://localhost:3000/users?page=23

Answer 1

你可以这样做：

1. 将@pagination 事件关联到某个方法和数据项的“页面”道具。
2. 在你的方法中，用 window.history.pushState 设置 url
3. 在 created() 生命周期钩子中，从 url 获取查询参数并将其设置为数据。

一个例子：

<template>
<div>
  <v-data-table
    :headers="headers"
    :items="desserts"
    :items-per-page="5"
    class="elevation-1"
    @pagination="setQueryPage"
    :page="paramPage"
  ></v-data-table>
</div>
</template>
<script>
  export default {
    data () {
        return {
            headers: [
            {
                text: 'Dessert (100g serving)',
                align: 'start',
                sortable: false,
                value: 'name',
            },
            { text: 'Calories', value: 'calories' },
            { text: 'Fat (g)', value: 'fat' },
            { text: 'Carbs (g)', value: 'carbs' },
            { text: 'Protein (g)', value: 'protein' },
            { text: 'Iron (%)', value: 'iron' },
            ],
            desserts: [
            {
                name: 'Frozen Yogurt',
                calories: 159,
                fat: 6.0,
                carbs: 24,
                protein: 4.0,
                iron: '1%',
            },
            {
                name: 'Ice cream sandwich',
                calories: 237,
                fat: 9.0,
                carbs: 37,
                protein: 4.3,
                iron: '1%',
            },
            {
                name: 'Eclair',
                calories: 262,
                fat: 16.0,
                carbs: 23,
                protein: 6.0,
                iron: '7%',
            },
            {
                name: 'Cupcake',
                calories: 305,
                fat: 3.7,
                carbs: 67,
                protein: 4.3,
                iron: '8%',
            },
            {
                name: 'Gingerbread',
                calories: 356,
                fat: 16.0,
                carbs: 49,
                protein: 3.9,
                iron: '16%',
            },
            {
                name: 'Jelly bean',
                calories: 375,
                fat: 0.0,
                carbs: 94,
                protein: 0.0,
                iron: '0%',
            },
            {
                name: 'Lollipop',
                calories: 392,
                fat: 0.2,
                carbs: 98,
                protein: 0,
                iron: '2%',
            },
            {
                name: 'Honeycomb',
                calories: 408,
                fat: 3.2,
                carbs: 87,
                protein: 6.5,
                iron: '45%',
            },
            {
                name: 'Donut',
                calories: 452,
                fat: 25.0,
                carbs: 51,
                protein: 4.9,
                iron: '22%',
            },
            {
                name: 'KitKat',
                calories: 518,
                fat: 26.0,
                carbs: 65,
                protein: 7,
                iron: '6%',
            },
            ],
            paramPage : 1,
        }

    },
    methods: {
       setQueryPage(paginationObject){
           let url = 'users?page='+ paginationObject.page
           window.history.pushState("", "", url);
        }
    },
    created(){
        console.log(this.$route.query.page)
        this.paramPage = parseInt(this.$route.query.page)
    }

  }
</script>