Recently, I handwritten the pager in the project (why it is handwritten, because the requirements for the style and appearance of the pager are relatively strict), and I encountered a requirement, that is, when we click on the page, enter the details, and then go back and hope to return to the previous page number value.
To solve this demand, I personally summed up two methods.
1: Comparing with Baidu, I don’t know if you have noticed that Baidu’s method of entering the details page is to open a new page, so that when we return to the list page, the page number value remains unchanged.
This is a desirable and simple way, and the implementation idea is as follows:
Generate a link, then specify the href attribute and target attribute of a, and then simulate the click event of a!
2: But sometimes our party A does not want to open a new page, here we can modify the query parameter of vue to achieve.
2-1: When we enter this list page, give an initial default value, for example: page=1
Don't worry about the page routing problem, as long as the route before the question mark is correct, it will not affect the page jump
2-2: We need to change the query value in the browser when the pager event occurs
Among them, currentPage is our current page number value, we just assign it to the parameter in our query
In this way, clicking the pager can dynamically change the value in the path.
const query=JSON.parse(JSON.stringify(this.$route.query))
query.page=this.currentPage//你的分页器页码值变量
this.$router.push({ path: this.$route.path, query })
In this way, after we click to enter the details page, the fallback is still the current page number value, and then everyone can judge and adjust the interface!
Finally, thank you everyone, if you can help you, I hope you will come back and give me a thumbs up!