How does vue eliminate the annoyance of clicking the "back" button? - Codes Helper - Programming Question Answer

How does vue eliminate the annoyance of clicking the "back" button?

Note: recently in mixed app development, the "return" in the title contains browser"s return button and phone"s return key .

condition:

vue project has three routes: Index, List and Detail, corresponding to three components of the same name respectively. Index has routes to jump to List,List and routes to Detail. In turn, Detail has a return button, which can jump to List,List and return buttons to Index

.

problem description

according to the normal operation logic, click the button on Index to jump to the List page, and the List page clicks on a record to jump to the Detail page, which is no problem, but when you click the back button on Detail to jump to the List page, and then by clicking the "back" button, you will find that you have jumped to the Detail page again-this time you often expect to return to the Index page.

question

1. What should I do with this operation? In order to make the app experience better, ask for ideas;
2, want to achieve a click on the phone back button, and then prompt: "press again to exit" function (may not have much to do with the above, if there is an idea, please provide the following)

< H2 > Thank you! < / H2 >

Spa single-page-application vue-router vue.js

Apr.02,2021

it is recommended to know hashChange , popstate event

knowledge points: onpopstate event, triggered when you click the back button (or call the history.back () method in JavaScript);

Code:

window.onpopstate = function() {  
      alert("")  
 };

when you jump, when router should use push, push, uses replace instead of replace
https://www.wx2share.com/m/

.

my this, if you click "Brand" category on the home page, you will enter a list page through router.push, and the list can be switched through tab. You can see that the url in the browser address is also changing, but this is the way I use router.replace to ensure that when you press the return button, it will not be displayed on the list page many times, and click a list item first to enter the details page again.
you can try, as long as you go to the details page, no matter how many tab switches you have on the list page, just press the back button twice on the home page.

so, your problem is the same, that is, to solve the problem of histroy in router

index- "list- > detail jump to push
detail- > list- > index with back or go (- 1).

about clicking twice to exit app,
app can intercept events that return physical keys, you tell app on the home page that this page is not allowed to return to the previous page (or is currently on the home page),
the rest is app's business, counting the number of clicks on the return button and so on

Previous: About the problem of spring boot url path matching slash "/"?

Next: Vue all pages forward request data back do not request data to maintain the previous browsing status, including sliding position, etc.

Menu