第一步：在router文件里面的index.js写入

 {
    path: '/carsList',
    name: 'CarsList',  //汽车列表
    component: () => import(/* webpackChunkName: "about" */ '../views/CarsList.vue'),
    meta: {
      keepAlive: true    //需要缓存
    }
}

上面是跳转路由，主要是把meta添加到里面

第二步：还是在这个文件里面加入

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes,

  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return { x: 0, y: 0 } //期望滚动到哪个的位置
    }
   },
})

加入的是scrollBehavior

scrollBehavior滚动行为

        使用前端路由，当切换到新路由时，想要页面滚到顶部，或者是保持原先的滚动位置，就像重新加载页面那样。 vue-router 能做到，而且更好，它让你可以自定义路由切换时页面如何滚动。

也可以不用写判断直接写，这也是为了两个页面一起滚动的问题

scrollBehavior (to, from, savedPosition) {
      return { x: 0, y: 0 }
   },

第三步：在App.vue文件里面添加

<!--  缓存组件跳转的页面 -->
     <keep-alive>   
        <router-view v-if="$route.meta.keepAlive" class="ui-view"  transition-mode="out-in"></router-view>
    </keep-alive>  
  <!-- 非缓存组件跳转页面 -->
  <router-view v-if="!$route.meta.keepAlive" class="ui-view"  transition-mode="out-in"></router-view>

        有时候我们不希望组件被重新渲染影响使用体验；或者处于性能考虑，避免多次重复渲染降低性能。而是希望组件可以缓存下来,维持当前的状态。这时候就可以用到keep-alive组件。

第四步：在跳转过去的页面返回当前页面的时候使用back返回页面

  methods: {
    backList() {
      this.$router.back("/跳转页面文件名");
    },
  },

back(): 原页表表单中的内容会保留；

history.back():后退 ；

history.back(0) 刷新；

history.back(1)：前进