Vue SPA Page Jump Parameter Encoding to Retain List State
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
When using the Vue framework to develop single-page applications, jumping between pages causes page refresh, resulting in the loss of query results, which degrades the user experience as users need to re-filter data upon returning to the list page.
Innovation Solution
A page display method that involves storing a page jump parameter when transitioning from a list page to a detail page and back, using a page jump function to convert and encode parameters, and parsing these parameters to restore the original list page state, allowing users to retain query results without re-filtering.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If page jumping is implemented between list page and detail page, then navigation functionality is improved, but query results are lost and user experience deteriorates
Solution Approach 1:
The patent applies preliminary action by storing the list page state (including query results and filtering conditions) in the URL parameters before jumping to the detail page. When returning from the detail page, the stored state is automatically restored, preventing information loss. This is implemented through the `getPageParams` function that captures the current list page state and embeds it in the navigation URL.
Solution Approach 2:
The patent uses copying by creating a copy of the list page state (query results, filtering conditions, pagination) and embedding it in the URL parameters. This copied state is then restored when returning from the detail page, ensuring the original query results are preserved without re-filtering. The `getPageParams` function creates this state copy that travels with the navigation.
2Productivity
If Vue framework is used for single-page application development, then development efficiency is improved, but page refresh on navigation causes information loss
Solution Approach 1:
The patent introduces an intermediary mechanism (URL parameters) that carries the list page state between navigation operations. The `getPageParams` function extracts and encodes the state into URL parameters, and the `useListPageParams` composable restores it, acting as intermediaries that preserve information through page transitions while maintaining Vue framework benefits.
Solution Approach 2:
The patent applies parameter changes by transforming the list page state (objects and data) into URL-friendly parameters through encoding and stringification. The state is converted from complex data structures into serialized parameter strings that can be stored in URLs, then restored back to their original form upon return, maintaining information integrity through parameter transformation.
3Adaptability or versatility
If filtering operation is performed to get query results, then data selection capability is improved, but re-filtering is required after page return which increases time consumption
Solution Approach 1:
The patent applies preliminary action by pre-storing the filtering conditions and query results in the URL parameters before navigation. When the user returns from the detail page, the filtering state is automatically restored without requiring re-filtering, thus eliminating the time loss. This is implemented through persistent storage of filter state in navigable parameters.
Data Source
AI summary
The present application provides a page display method and apparatus. The method includes: when a query operation for target data in a list page is received, jumping from the list page to a detail page corresponding to the target data, and storing a first page locating identifier of the detail page, the first page locating identifier including a page jump parameter; and obtaining the page jump parameter, and jumping from the detail page back to the list page according to the page jump parameter.