vue H5实现页面跳转返回之前滚动的位置

keepAlive实现

场景：主页面pageA,通过点击跳转到pageB->返回pageA后会刷新pageA页面：发送请求并返回最顶端的起始位置

目的：希望从pageB返回pageA的时候返回之前在pageA的滚动位置

实现：

在router/index.js中pageA的路由配置中添加meta:{keepAlive:true}(前提是项目中使用<keep-alive>包裹了<router-view>)
在主页面pageA文件中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


data(){
  scrollTop:0,
}
beforeRouteLeave(to,from,next){
  //记录滚动容器的滚动位置
  this.scrollTop = this.$refs.containerBox.scrollTop //滚动容器
  next()
},
beforeRouteEnter(to,from ,next){
//通过vm访问组件实例
  next(vm=>{
    // 恢复滚动位置
    vm.$refs.containerBox.scrollTop = vm.scrollTop
  })
}

遗留问题

目标：通过路由的query（在其他页面调用this.$router.push({path:'/pageA',query:{personId : newPersonId}})）希望能够复用pageA并且刷新页面的数据，更新为newPerson的数据

理想实现：通过routeBeforeUpdate监听路由query的变化并请求数据刷新pageA页面

问题：routeBeforeUpdate不触发（还没有弄明白原因 😥 ）

当前实现：通过watch监听$route, 判断路由中query的personId是否改变：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12


watch(){
  $route(to,from){
    if(to.query.personId){
      if(to.query.personId!=this.personId){
        // 请求数据
        ...
        // 返回页面顶端位置
        this.scrollTop = 0
      }
    }
  }
}

或者在activated中，判断是否要更新数据

事件监听实现

实现：

mounted中判断scrollTop并赋值给滚动容器，添加滚动事件监听
路由跳转记录滚动位置

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


mounted(){
	// 初始化页面数据 发送请求+从路由query中取scrollTop赋值给  this.scrollTop 
  window.addEventListener('scroll',this.handleScroll,true)
},
destroyed(){
  window.removeEventListener('scroll',this.handleScroll,true)
},
methods:{
  handleScroll(){
    this.nextTick(()=>{
      if(this.$refs.containerBox){
        this.scrollTop = this.$refs.containerBox.scrollTop
      }
    })
  },
  //页面跳转
  goPage(){
    this.$router.push({
      name:'pageB',
      query:{
        personId:'personB',
        scrollTop:this.scrollTop
      }
    })
  }
}
  

解析vue-router组件内守卫

beforeRouteLeave和beforeRouteUpdate由于已经能够访问this了，不支持回调。

常用场景：

beforeRouteLeave实现用户未保存修改禁止离开：

这个离开守卫通常用来禁止用户在还未保存修改前突然离开。该导航可以通过 next(false) 来取消。

1
2
3
4
5
6
7
8


beforeRouteLeave (to, from, next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

前进刷新后退不刷新：

keep-alive前进刷新后退不刷新 https://www.cnblogs.com/yuer01/p/14267944.html