Vue后退缓存页面浏览数据及位置

小鱼儿 2022-12-14 15:57 149阅读 0赞

## 背景 ##

列表页面跳转到详情页面，然后再从详情页面通过按钮跳回到列表页面，希望回到原来列表页面的位置，且不再去请求接口

## 技术点 ##

**keepAlive**  
缓存组件：  
第一次进入：beforeRouterEnter ->created->…->activated->…->deactivated  
后续进入时：beforeRouterEnter ->activated->deactivated

**scrollBehavior**  
动态设置进入下个路由的页面位置  
[scrollBehavior知识解析][scrollBehavior]

## 代码 ##

路由设置

routes:[{ 
        path:'/pageA',
        name:'PageA',
        component:()=>import('../components/keepAction/PageA.vue'),
        meta:{ 
            keepAlive:true,
            isUseCache:false//判断数据是否刷新
        }
    },{ 
        path:'/pageB',
        name:'PageB',
        component:()=>import('../components/keepAction/PageB.vue')
    }],
    //scrollBehavior 方法接收 to 和 from 路由对象。
    //第三个参数 savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。
    scrollBehavior(to, from, savedPosition) { 
        if (savedPosition) {         
            return savedPosition    
        } else {          
            return {  x: 0, y: to.meta.savedPosition || 0 }    
        }  
    }

PageA

<template>
        <div id="PageA">
            列表页面
            <ul>
                <li v-for="(item,index) in list" :key="index" @click="pageTo">{ { item}}</li>
            </ul>
        </div>
    </template>
    
    <script>
        export default { 
            data() { 
                return { 
                    list: []
                }
            },
            mounted(){ 
                // 通过 addEventListener 方法注册事件的时候需要格外小心 
                // 如果在 destroyed 钩子函数中没有销毁 scroll 事件
                // 在激活 home 组件的时候会再次绑定 scroll 事件
                // window.addEventListener('scroll', this.justifyPos)
                // 通过 on 方式绑定事件能够有效避免上述情况
                window.onscroll = this.justifyPos
            },
            activated() { 
                // isUseCache为false时才重新刷新获取数据
                // 因为对list使用keep-alive来缓存组件，所以默认是会使用缓存数据的 
                if(!this.$route.meta.isUseCache){             
                    this.list = []; // 清空原有数据
                    //获取接口数据
                    let num = Math.random()*100
                    for(let i = 0; i < num; i++){ 
                        this.list.push(i)
                    }
                } 
                this.$route.meta.isUseCache = false;
            },
            methods: { 
                pageTo() { 
                    this.$router.push("/pageB")
                },
                justifyPos () { 
                    // 节流；
                    if (this.timerId) clearTimeout(this.timerId)
                    let that = this
                    this.timerId = setTimeout(() => { 
                        // 获取页面滚动距离之后设置给当前路由的 元信息
                        that.$route.meta.savedPosition = window.pageYOffset     
                    }, 300)
                }
            },
            beforeRouteLeave (to, from, next) {         
                if (to.name == 'PageB') { 
                    from.meta.isUseCache = true;    
                }        
                next();
            },
            destroyed () { 
                // 当组件销毁的时候，移除滚动行为监听, 清空定时器；
                // 该方法是绑定到 window 身上，即使跳转到其他组件，仍然会监听页面的滚动行为
                window.removeEventListener('scroll', this.justifyPos)
                clearTimeout(this.timerId)
            }
        }
    </script>
    
    <style scoped>
        ul li:nth-child(odd){ 
            background: pink;
        }
    </style>

PageB

<template>
        <div id="PageB">
            详情页面
            <button @click="goBack">返回</button>
        </div>
    </template>
    
    <script>
        export default { 
            methods: { 
                goBack() { 
                    this.$router.push('/pageA')
                }
            },
        }
    </script>
    
    <style lang="scss" scoped>
    
    </style>

[scrollBehavior]: https://router.vuejs.org/zh/guide/advanced/scroll-behavior.html