vue 页面跳转记录位置返回在原来滚动的位置

第一步：在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返回页面

就是在A向B页面跳转然后B 页面中使用back返回页面 backList是定义的

    <div class="car_list_jump" @click="backList()">
           
    </div>

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

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

history.back():后退 ；

history.back(0) 刷新；

history.back(1)：前进