The Vue implementation goes back to the previous page and stays where it was, without refreshing

Sometimes that happens. From the list page to the details page, and then click back, our interface will be called again, the page will run to the top, so that the user experience is very bad, each time the user has to go from top to bottom again, here is how to solve this problem.

1. Configure the route cache

export default new Router({
  routes: [{path: '/hello'.name: 'HelloWorld'.component: HelloWorld,
      meta: {
        keepAlive: true // Cache is required}}, {path: '/hello2'.name: 'HelloWorld2'.component: HelloWorld2,
      meta: {
        keepAlive: false // No caching is required}}].mode: 'history',
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0.y: 0}}}Copy the code

2. Configure the app. vue file<router-view/>

<keep-alive>
    <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if=! "" $route.meta.keepAlive"></router-view>
Copy the code

$router. Back ()

When the user clicks the back button on the details page, we return the button eventthis.$router.go(-1)Switch tothis.$router.back()You have to use this to make it work!