关于vue路由携带不同参数跳转同一个页面路由页面复用解决记录

携带参数跳转页面

this.$router.push({path: '/whale/Detail', query: {actId: row.actId}})

页面中监听路由并更新数据

  watch:{
    '$route'(val, from) {//监听到路由（参数）改变
      // 拿到目标参数 vval.query.actId 去再次请求数据接口
      if(val.query.actId){
        this.routerMsg = val.query.actId
        this.getDetailMsg(this.routerMsg)
        this.getPrizeList()
        this.getPeopleList()
        this.getPrizeWinnerList()
        this.getSomeTypes()
        this.getMPeopleList()
        // console.log('数据更新')
      }
    }
  },