• vue 返回滚动位置


    list页面要使用keep-alive,这里再app.vue里判断

    app.vue

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

    router.js

    使用history模式 scrollBehavior里是具体代码,一开始是在scrollBehavior里获取

     document.documentElement.scrollTop || document.body.scrollTop;但是第一次进入页面的时候滚动页面高度无法获取,所以就在list.vue里
    beforeRouteLeave方法里设置高度,然后就可以在scrollBehavior return相应的高度了

    export default new Router({
      mode: "history",
      base: "/m/",
      scrollBehavior(to, from, savedPosition) {
      return { x: 0, y: to.meta.savedPosition || 0 };
    },
    routes: [
      {
        path: "/",
        name: "list",
        component: List,
        meta: { keepAlive: true }
      } 
    ]
    });

    list.vue

        beforeRouteLeave(to, from, next) {
          let position = document.documentElement.scrollTop || document.body.scrollTop;
          from.meta.savedPosition = position;
          next()
        },
  • 相关阅读:
    jenkins--部署项目
    jenkins--创建项目
    jenkins--安全配置
    jenkins--工具配置
    jenkins--系统配置
    11.17
    11.14
    11.13
    dfs
    10.31
  • 原文地址:https://www.cnblogs.com/silences/p/8876978.html
Copyright © 2020-2023  润新知