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
    评论
Vue是一种用于构建用户界面的JavaScript框架,而Spring Boot是一个用于构建企业级Java应用的框架,Neo4j是一种图形数据库。想要将它们结合起来实现视图可视化,可以按照以下步骤进行: 1. 使用Vue来创建前端界面:使用Vue组件路由功能,可以方便地创建用户界面。可以使用Vue的模板语法和数据绑定来实现动态更新界面的功能。 2. 使用Spring Boot来创建后端服务:Spring Boot提供了丰富的功能和库,可以轻松地构建和管理后端服务。可以使用Spring Boot的依赖注入和控制反转来管理组件之间的依赖关系。 3. 使用Neo4j来存储和管理数据:Neo4j是一种图形数据库,可以存储关系型数据,并提供灵活的查询功能。可以使用Neo4j的图形查询语言来查询和操作数据库中的数据。 4. 将Vue和Spring Boot连接起来:可以使用Vue的Ajax或Axios等工具来发送和接收数据。可以使用Spring Boot的REST API来处理前端请求,并与Neo4j进行交互。 5. 实现数据的可视化:根据需要,在前端界面中使用合适的图表库或可视化工具来展示从后端获取的数据。可以根据数据类型选择合适的图表类型,如柱状图、折线图或饼图等。 通过以上步骤,就可以实现将Vue、Spring Boot和Neo4j结合起来,实现视图可视化的功能。前端界面使用Vue进行开发,后端服务使用Spring Boot进行构建和管理,而数据存储和查询则使用Neo4j进行处理。最终,可以通过前端界面展示从后端获取的数据,并以图表或其他形式进行可视化展示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值