vue 从某个页面进入到当前路由时,滚动浏览器视图到特定内容的可视区域

需求描述:当我们从某个特定的页面进入到当前的那个路由页面时,需要滚动浏览器视图到特定内容区域;从其他页面进入当前页面时,则无法滚动视图区域,那么我们如何判断路由跳转呢?

首先我们可能想到的是,路由监听,可以获取 from 和 to 的路由信息。代码如下:

watch:{
   $route (to, from) {
     console.log(to, from);
   }
},

使用上述监听路由时,并没有在控制台打印任何路由信息,而我决定采用深度监听路由变化,代码如下:

watch: {
   $route: {
     handler: function (val, oldVal){
       console.log(val);
     },
     deep:  true // 深度观察监听
   }
},

当然使用了深度监听依然没有任何信息输出的,这是我们可以在 watch 中 使用 immediate:true 就可以打印了。

watch: {
  '$route':{
    handler(newV, oldV){
      console.log(newV, oldV)
    },
    immediate:true
  } 
},

当然我们也可以使用组件内的钩子函数:beforeRouteEnter 。

注意:beforeRouteEnter 守卫 不能访问 this,因为守卫在单号确认前被调用,因此即将登场的新组件还没被创建。不过你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候,执行回调,并且把组件实例作为回调方法的参数。beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdate 和 beforeRouteLeave 来说,this 已经可用了,所以不支持传递回调,因为没有必要了。

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 通过 `vm` 访问组件实例
  })
}

更多详情,请查看:vue-router 官网之组件内的守卫

vue-router 路由钩子 beforeRouteEnter  可以用来在初始进入页面前,可以异步获取数据;

beforeRouteEnter (to, from, next) {
  next(vm => {
    // 因为当钩子执行前,组件实例还没被创建
    // vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
    if (from.path === '/personalCenter/messageCenter') { // 从消息中心跳转过来的
      const applyId = to.query.applyId
      if (applyId) {
        vm.$utils.scrollDocument(800, true)
        vm.handleSplitOrderDetail(Number(applyId))
      } else {
        vm.$utils.scrollDocument(700, true)
      }
    }
  })
},

 

  • 1
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值