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.keepAlive为true，则会将组件进行缓存，因此我们的列表界面的keepAlive需要设置为true。

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

二、获取下拉列表的位置

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.