0
点赞
收藏
分享

微信扫一扫

vue-router如何在返回时返回到上次滚动位置

鲤鱼打个滚 2022-01-20 阅读 79

路由配置文件里

const router = new VueRouter({
  mode: 'history',
  routes,
  // to:要进入的目标路由对象,到哪里去
  // from:离开的路由对象,从哪儿来
  // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。savedPosition: 会记录滚动条的坐标,点击"后退/前进" 时的记录值(x:?,y:?)
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    // 如果keepAlive的话,保存停留的位置:
    if (from.meta.keepAlive) {
      from.meta.savedPosition = document.body.scrollTop;
    }
    // return 期望滚动到哪个的位置
    return {
      x: 0,
      y: to.meta.savedPosition || 0,
    };
  },
})

在router.js里面需要记录位置的单页面里面

let routes = [
  {
    path: '/',
    name: 'home',
    component: import('@/views/home/index'),
    meta: {
      title: 'home',
      keepAlive: true
    }
  }

在组件中

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

参考:
vue-router如何在返回时返回到上次滚动位置 方法集锦

举报

相关推荐

0 条评论