项目开发中常常会遇到详情返回列表，列表默认在点击详情的高度的问题，特此总结一下，希望可以帮到你们

lentrue 发布于2019-08-26 12:08 / 1041人阅读

摘要：从第二页返回首页时为只处理设置了路由元信息的组件简单的分享给大家，希望可以帮到你们

刚刚解了一个详情返回列表时候，列表高度保持在点击进去的详情的问题，特此做个分享，希望大家碰到类似的问题可以直接一遍过，不用卡壳（因为这个在实际项目开发中经常会用到所以分享了出来）

Vue api 是这样说的 api链接传送门

dome是这样的

经过详细查看（话不多说，贴代码）

scrollBehavior (to, from, savedPosition) {
    if(savedPosition) {
        setTimeout(() => {
            window.scrollTo(savedPosition.x, savedPosition.y)
        }, 200)
    }
}

或者结合keep-alive来达到后退时不刷新数据，前进时刷新数据的效果。

new VueRouter({
    mode: "history",
    routes: [{
        path: "/foo",    
        component: (resolve) => {
            require(["views/foo"], resolve)
        },
        meta: {isKeepAlive: true}
    }],
    scrollBehavior (to, from, savedPosition) {
        if (savedPosition || typeof savedPosition == "undefined") { //从第二页返回首页时savePosition为undefined
            //只处理设置了路由元信息的组件
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == "undefined" ? undefined : false;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == "undefined" ? undefined : true;
            if(savedPosition) {
                return savedPosition;
            }
        } else {
            from.meta.isKeepAlive = typeof from.meta.isKeepAlive == "undefined" ? undefined : true;
            to.meta.isKeepAlive = typeof to.meta.isKeepAlive == "undefined" ? undefined : false;
        }
    }
})

简单的分享给大家，希望可以帮到你们

混合云服务器托管中常会阿里云怎么看服务器被攻击的详情布局遇到的问题学习遗传算法遇到的问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/108100.html

项目开发中常常会遇到详情返回列表，列表默认在点击详情的高度的问题，特此总结一下，希望可以帮到你们

摘要：从第二页返回首页时为只处理设置了路由元信息的组件简单的分享给大家，希望可以帮到你们刚刚解了一个详情返回列表时候，列表高度保持在点击进去的详情的问题，特此做个分享，希望大家碰到类似的问题可以直接一遍过，不用卡壳（因为这个在实际项目开发中经常会用到所以分享了出来） Vue api 是这样说的 api链接传送门 showImg(https://segmentfault.com/img/b...

crelaber 2019-08-02 11:01 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（下）

摘要：用开发仿旅游站项目总结上该说的话，该表明的上篇已经表明了。之后的路由切换不再请求数据是因为组件内容是从内存取了不会再重新创建了，对应的钩子函数不会再执行了。此时，通过新增的生命周期钩子函数以及这个缓存值就实现了我们要的功能了。用Vue开发仿旅游站webapp项目总结（上）该说的话，该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我，不过下下篇估计没了，这篇总结完，下下篇可...

libxd 2019-08-29 17:15 评论0 收藏0
用Vue开发仿旅游站webapp项目总结（下）

摘要：用开发仿旅游站项目总结上该说的话，该表明的上篇已经表明了。之后的路由切换不再请求数据是因为组件内容是从内存取了不会再重新创建了，对应的钩子函数不会再执行了。此时，通过新增的生命周期钩子函数以及这个缓存值就实现了我们要的功能了。用Vue开发仿旅游站webapp项目总结（上）该说的话，该表明的上篇已经表明了。谢谢上篇评论区一些同学~ 很鼓励我，不过下下篇估计没了，这篇总结完，下下篇可...

KavenFan 2019-08-26 12:24 评论0 收藏0