The VUE implementation returns to the previous page, leaving the page where it was, without refreshing

When we go from the list page to the details page, when we click back, the interface will be refreshed again and the page will go to the top, so we have to slide back to the previous browsing position, which makes the user experience very unfriendly. This can be solved using Vue’s keep-alive.

1. Configure routes on the router

const routes = [
  
  {
    path: '/',
    name: 'Home',
    meta: {
      keepAlive:true
    },
    component: resolve => require(['@/views/Home'],resolve)
  },
  {
    path: '/login',
    name: 'login',
    component: resolve => require(['@/views/login'],resolve)
  },
  ]
Copy the code

On the home page we set the value of the keepAlive field to true.

2. Set keep-alive in app. vue

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