vue处理分页停留

vue处理分页停留

1.需求说明：当我们在展示数据分页的时候，跳转到别的分页，需要查看分页数据的信息就会跳到另一个组件，这时候我们再点击返回按钮的时候，分页会重置掉不会记录我们选择跳转的分页，而是返回到第一页

2.我们查看第4页的最后一条数据，这时候已经跳转了路由，当我点击返回的时候需要返回到第4页，而不是跳到第一页

3.这时候我们先使用生命周期，当组件更新的时候把跳转的到第几页的数值存起来

updated() {

　　sessionStorage.setItem('page', this.query.page)

},

4.然后在，进入这个组件的时候取出来，这里在进入之前先判断存的值为什么存在，不存在初始化，存在就到返回页（这里为什么要这样处理呢，因为我们还要跳到别的路由，去别的组件，这时候当然要把这个存的page值给清空了，不然跳到别的组件，然后在跳转回来的时候还是会拉取存储的分页数据）

created() {

　　if (!parseInt(sessionStorage.getItem('page'))) {

　　　　this.query.page = 1

　　} else {

　　　　this.query.page = parseInt(sessionStorage.getItem('page'))

　　}

},

5.在什么时候移除呢这时候就用到了beforeRouterLeave 组件内的路由钩子函数

beforeRouteLeave: (to, from, next) => {

　　if (to.path !== '/integral/detail') {

　　　　sessionStorage.removeItem('page')

　　}

　　next()

},

6.我们在详情页组件也要使用一下这个组件内的路由钩子函数，判断返回的路由，如果不是就移除了session

　　beforeRouteLeave: (to, from, next) => {

　　　　if (to.path !== '/integral/list') {

　　　　　　sessionStorage.removeItem('page')

　　　　}

　　　　next()

　　}