[JavaScript知识库] vue获取上一个页面路由地址

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> vue获取上一个页面路由地址 -> 正文阅读

[JavaScript知识库]vue获取上一个页面路由地址

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

需要用到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>