Vue SPA Page Navigation State Preservation
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 filtered query results, which degrades user experience.
Innovation Solution
A page display method that involves sending requests to a server to store and retrieve page jump parameters, allowing seamless navigation between parent and child pages while preserving query results.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If page jump is implemented in Vue single-page application, then navigation between pages is enabled, but page refresh occurs causing loss of filtered query results
Solution Approach 1:
The patent applies preliminary action by storing the parent page's query parameters and filter conditions in the server's memory before the page jump occurs. When the user navigates from the parent page to the child page, the system has already preserved the necessary information, so upon returning to the parent page, the filtered query results can be restored without re-executing the filter operations.
2Reliability
If traditional page refresh is used during navigation, then page state is reset to initial state, but user experience degrades due to loss of query results
Solution Approach 1:
The patent introduces an intermediary mechanism - a server-side memory storage system that acts as a mediator between the client's page navigation requests and the application state. Instead of directly resetting the page state during navigation, the system uses this intermediary storage to preserve and restore the necessary state information, thereby improving user experience while maintaining reliable page state management.
3Ease of operation
If filtered query results are preserved during page jump, then user experience is improved, but server memory consumption increases
Solution Approach 1:
The patent applies the extraction principle by selectively storing only the essential query parameters and filter conditions in the server's memory, rather than preserving the entire page state or all data. This extracted minimal necessary information is sufficient to restore the filtered query results upon page return, thereby improving user experience while minimizing the additional memory consumption on the server.
Data Source
AI summary
A method includes: when a query operation on target data in a parent page is received, sending a first request to a server so as to store a page jump parameter of the parent page, and jumping from the parent page to a sub-page corresponding to the target data; sending a second request to the server so as to acquire the page jump parameter of the parent page, and jumping from the sub-page back to the parent page according to the page jump parameter.