Preface: first, what is A “refresh back not refresh”, such as A, I have A list of data page data details page and other pages C B, after browse pages and then enter the B, if returned to A page that originally the browse pages total want to save it, not every family returned to from the first page to turn, this requires to back refreshed. If the user enters A from other page C, the user should start from the first page. There is no need to save the state, so the user needs to refresh.
First, back up without refreshing: The Vue-Router provides a keep-alive tag. I didn’t know what it was for until this time. Its function is literally to preserve the activity, that is, to preserve its contents without destroying them.
In this way, the component will not be destroyed when the route leaves the current page. However, not all pages need to be saved
1. Add a keepAlive property to the meta object in each route setting as follows:
2. The keep-alive message is used to wrap the route only when the keepalive attribute of the current route is true
Do this step, the page does not refresh, but this does not refresh is brainless and not selective, how to achieve according to the situation and not refresh? That of course requires a judgment, right? What is it? If (from. Name === ‘B’) {} if(from. Name === ‘B’) {} But here’s the problem. BeforeRouteEnter can’t get the vue instance, so we can’t call the component’s data update method directly, so we need to add a requireAuth property to the meta object in the route. The requireAuth is then used to determine when to update the data in the Activated hook (at which point this instance is available). As shown in figure:
At this point, the page should have implemented criteria to decide whether to refresh the data.
A problem occurs to me that since we can’t get this instance in beforeRouteEnter, we need to store a variable in the route and then execute the function activated. So why not just judge and perform in Activated??
Oh, ok. The activated hook does not look like the from argument…