如何传递动态路由参数?

时间:2018-11-21 12:42:33

标签: vue.js routing vuex vue-router

我需要单击以转到使用动态路由创建的下一页。它从vuex商店获取路线的ID。当我点击它时,会给出这个网址

http://localhost:8080/worklist/%7Bname:'worklistDynamic',%20params:%7B%20id:sideSwiperItems[indx+1].id%7D%7D
 ---------------------------------------

这是我的代码:

//html
.side-button-next(@click='switchPage()')
//function
--------------------------
switchPage() {
      this.$router.push(
        `{name:'worklistDynamic', params:{ id:this.sideSwiperItems[this.indx+1].id}}`,
      )
    },
--------------------------
computed: {
sideSwiperItems() {
  return this.$store.state.buildingData.sideSwiperItems
},
indx() {
  if (this.$store.state.buildingData.index === null) {
    return 0
  }
  return this.$store.state.buildingData.index
},

},

1 个答案:

答案 0 :(得分:0)

尝试删除反引号:

switchPage() {
  let path = { name: 'worklistDynamic', params: { id: this.sideSwiperItems[this.indx + 1].id } }

  // or you can write the full path with backticks and interpolation
  let path = `/worklistDynamic/${this.sideSwiperItems[this.indx + 1].id}`

  this.$router.push(path)
}