项目需求是需要在当前页面获取上一个路由地址,并根据不同地址进行请求不同接口和页面样式调整的操作。记录一下:

需要用到vue-router的beforeRouterEnter钩子
其实也就是一个组件内的路由守卫

<script>
export default {
  data() {
    return {
      fromPath: "",
    };
  },
 beforeRouteEnter (to, from, next) {
    next(vm => {
      console.log(from, 'from')
      //  这里的vm指的就是vue实例,可以用来当做this使用
      vm.fromPath = from.path  //获取上一级路由的路径
      if (
        from.path === '/h5/indexOrderDetail' ||
        from.path === '/h5/storeOrderDetail'
      ) {
        vm.headerRightText = ''
        vm.showDefault = false
      }
    })
  },
  methods: {
  //根据上一页面路由不同,提交时候请求不同的接口
   onSubmit () {
        if (this.fromPath === '/h5/indexOrderDetail') {
          this.updateIndexOrderAddress()
        } else if (this.fromPath === '/h5/storeOrderDetail') {
          this.updateStoreOrderAddress()
        } else {
          this.editAddress()
        }
    },
};
</script>

打印 from
在这里插入图片描述

注意
beforeRouteEnter 守卫 不能 访问 this因为守卫在导航确认前被调用,因此即将登场的新组件还没被创建

不过,你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数:

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

注意 beforeRouteEnter 是支持给 next 传递回调的唯一守卫。对于 beforeRouteUpdatebeforeRouteLeave 来说,this 已经可用了,所以不支持 传递回调,因为没有必要了:

beforeRouteUpdate (to, from) {
  // just use `this`
  this.name = to.params.name
}

详细可阅读 Vue Router组件内的守卫beforeRouteEnter 官方文档

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐