Paging logic

background

Requirement: The page should be returned with pagination, search, etc

Paging begins with in-page data maintenance and requires pagination of page records. To preserve pages, watch stores routes every time a page changes and uses $router.push to prevent page refreshes.

The search box in the upper right corner of Layout should be used to filter different pages, and the filtering conditions should be reserved for routing. This.$refs.RouterView.getData (this.search) is used in the searchHandle file because each page requests basic data using getData. The route is stored in search again, and the split page and search data are initialized in each page respectively. Routerview. getData can be used to update the page search criteria of the child routing component, or to update the Layout – search-input page.

Routerplan

All paging and searching operations operate routes directly. Data request operations are performed by listening routes. Listening routes pass props through components, with routes as the core.

steps

1. Bind routes
// router/index.js
path: '/'.component: Layout,
props: route= > ({
    // The child route has params.id, which can be accessed within layout
        id: route.params.id,
        page: route.query.page,
        pageSize: route.query.pageSize,
        search: route.query.search
    }),
children: [{...props: route= > ({
        page: route.query.page,
        pageSize: route.query.pageSize,
        search: route.query.search
    })
},
...
  ]
/ / component binding props: [' id ', 'search', 'page', 'pageSize]
Copy the code
2. Layout Search Operates routes
/ / searchHandle function
this.$router.push({
    path: this.$route.path,
    // Input is bound by V-model, and a text field is required
    // Set page to 1 for each search and save pageSize each time to ensure that pages are fully logged
    query: { search: this.text, page: 1.pageSize: this.pageSize || 15}})Copy the code
3. Request data within the page
// Request list function getData
getData({ page = 1, pageSize = 15, search }){... }// This is a component-update hook for vue-router. GetData () must be passed as a parameter, because at the time of this hook, the route has not been updated, and the data inside the props is historical. There is no after hook.
beforeRouteUpdate(to, from, next) {
    this.getData(to.query)
    next()
}
                                              
// The beforeRouteUpdate hook does not fire on first access, so mounted/created fires. You can't use beforeRouteEnter because you can't access this at this point.
created() {
    this.getData(this.$route.query)
},

// Bind the paging component
<el-pagination 
    :current-page="Number(page) || 1"
    :page-size="Number(pageSize) || 15"
    @size-change="sizeChange"
    @current-change="currentPage" />

/ / change method
sizeChange(size) {
    this.$router.push({
        path: this.$route.path,
        query: { page: this.page, pageSize: size, search: this.search }
    })
},
currentPage(index) {
    this.$router.push({
        path: this.$route.path,
        query: { page: index, pageSize: this.pageSize || 15.search: this.search}
    })
},
Copy the code