当前位置:   article > 正文

vue 详情界面返回列表界面保留原来浏览位置_进入二级页面保留列表位置

进入二级页面保留列表位置

需求

1.现有一个列表界面page1,列表详情界面page2。
2.先从列表界面page1进入到列表详情界面page2,然后从page2回到page1之后,列表界面page1的位置不刷新(即回到原来的浏览位置)

实现方法

一、先缓存列表界面

1.先在路由管理文件index.js中添加meta属性

		{
            path: '/datadetail',
            component: DataDetail
        },
        {
            path: '/datalist',
            component: DataList,
            // 设置keepAlive:true---说明此组件需要进行数据缓存
            meta: {
                keepAlive: true
            }
        },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

2.使用<keep-alive>标签将<router-view>包裹起来

		<keep-alive>
			<router-view v-if="$route.meta.keepAlive"></router-view>
		</keep-alive>
		<router-view v-if="!$route.meta.keepAlive"></router-view>
  • 1
  • 2
  • 3
  • 4

通过V-if进行判断,如果前面路由配置的$route.meta.keepAlivetrue,则会将组件进行缓存,因此我们的列表界面的keepAlive需要设置为true

不使用keep-alive时,钩子函数执行顺序为:
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive缓存组件时,钩子函数执行顺序为:
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivatedcreatedmounted不会再执行。

二、获取下拉列表的位置

1.先在page1.vue列表详情组件中找到下拉列表的div并设置ref属性

	<div class="wrapper" ref="wrapper">
    <div class="title">我是标题</div>
    <van-pull-refresh v-model="isRefresh" @refresh="onRefresh">
      <van-list class="list" v-model="loadingMore" :finished="finished" finished-text="没有更多了" @load="onLoadMore">
        <div class="item-wrapper" v-for="item in list" :key="item.id" @click="clickItem(item)">
         	<div class="item">{{item}}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10

在上面的下拉列表中设置ref="wrapper"的属性

2.因为使用了 keep-alive,页面被缓存起来了,所以 data 里的数据不会丢失,可以在 data中声明一个变量 scroll 来存储scrollTop的值。

	data() {
 		return {
    		scroll: 0,//存储` scrollTop `的值
    		}
  	},
	// 离开路由之前执行的函数
 
  	beforeRouteLeave(to, from, next) {...},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

3.然后再page1.vue的页面中添加一个钩子函数beforeRouteLeave(to, from, next)

	// 离开路由之前执行的函数
 
 	beforeRouteLeave(to, from, next) {
 
    // 如果在window中出现的滚动条
    // this.scroll = window.scrollTop;
 
    //  如果在某个指的元素中出现的滚动条 就在该素中添加ref属性(例如上面的div设置ref="wrapper")
    this.scroll = this.$refs.wrapper.scrollTop;
    
    next()
  },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

三,获取并设置scrollTop

通过beforeRouteLeave(to, from, next) 来获取的列表位置值,并将位置值存储到scroll中,从page2页面返回到列表页面page1时,获取前面缓存的列表高度scroll值,并赋值给scrollTop,从而达到返回列表时位置不变,只需要再activated钩子函数中设置scrollTop,就可实现需求。

	data() {
 		return {
    		scroll: 0,//存储` scrollTop `的值
    		}
  	},
	// 离开路由之前执行的函数
  	beforeRouteLeave(to, from, next) {...},
  	//这一步就能实现需求
	activated() {
	this.$refs.wrapper.scrollTop = this.scroll
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

当然也有的说是,将scroll赋值的时候,直接赋值在进入路由之前执行的钩子函数中beforeRouteEnter(to, from, next),但是这个我没有实现,也可以参考一下:

	data() {
 		return {
    		scroll: 0,//存储` scrollTop `的值
    		}
  	},
	// 离开路由之前执行的函数
  	beforeRouteLeave(to, from, next) {...},
  	 // 进入路由之前执行的函数
 
  	beforeRouteEnter(to, from, next) {
    next(vm => {
      // 如果在window中出现的滚动条
      // window.scrollTop = vm.scroll;
 
      // 如果在某个指的元素中出现的滚动条 就在该素中添加ref属性,如:ref="listBox"
      vm.$refs.listBox.scrollTop = vm.scroll
    })
  }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

参考文献:
MuGuiLin: link.
摇摇奶昔x: link.

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/很楠不爱3/article/detail/731047
推荐阅读