详情页返回列表页当前位置

Bertha 。 2023-02-21 11:42 19阅读 0赞

利用keepAlive

在app.vue中写两个

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

在路由里面配置 index.js

{
                path: "/persiondetail",
                name: "persiondetail",
                component: resolve => require(["../views/person/persiondetail"], resolve),
                meta: {
                    isLogin: true,
                    index: 2,
                    keepAlive:false, //不需要缓存的组建
                }
            },
            {
                path: "/persiondetail",
                name: "persiondetail",
                component: resolve => require(["../views/person/persiondetail"], resolve),
                meta: {
                    isLogin: true,
                    index: 2,
                    keepAlive:true ,  需要缓存的组建
                }
            },

上面的是开始 下面是需要在组建中写的 ，  
给出现滚动条的盒子加两个属性 ref 和scroll  
（一定要找到出现滚动条的的那个盒子，不然没有效果）

下面是组建被缓存之后走的  
组件中的name值要和router中的name值是一样的

export default {
     name: "person",   这里的name一定要和router中的name值是一样的  
        components: {
        },
        data() {
            return {
                toop:null,
            }
        },
        //组件缓存之后 再次进入组建的走的函数
        activated(){
            //通过$ref获取dom元素
            this.$refs.lazyRef.scrollTop = Number(window.sessionStorage.getItem('top'))
          },
          
        methods: {
            // 获取滚动条与顶端距离
            scroll(event){
                this.toop = event.target.scrollTop
                console.log('scroll', event.target.scrollTop)
              },
        },
        //离开组件时把高度保存到sessionStorage中
        beforeRouteLeave(to,from,next){
            window.sessionStorage.setItem('top',this.toop);
            next()
        },
    }

这个是我具体的总结，参考了很多的东西  
[keepAlive的使用][keepAlive]  
[组件的钩子函数][Link 1]  
[vue获取滚动条的位置][vue]  
[$nextick的使用][nextick]

[keepAlive]: https://juejin.im/post/5cdcbae9e51d454759351d84#heading-4
[Link 1]: https://www.csdn.net/gather_2d/OtTagg4sMjA5LWJsb2cO0O0O.html
[vue]: https://www.jianshu.com/p/821c8a10d14f
[nextick]: https://segmentfault.com/q/1010000008497683