vue中如何点击列表页跳转到详情页，并保存当前点击的位置，返回时仍是当前位置

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

{
path: ‘/’,
name: ‘Home’,
component: Home,
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)：前进