如何在 Vue.js 中将动态页面 :id 传递给 $http.get url答案

【问题标题】：How do I pass a dynamic page :id to $http.get url in Vue.js如何在 Vue.js 中将动态页面 :id 传递给 $http.get url
【发布时间】：2016-03-08 08:06:06
【问题描述】：

我已经设置了视图路由器：

router.map({
    '/tracks/:id': {
        component: SingleTrack
    }
})

这是我的组件（使用硬编码的 URL）：

var SingleTrack = Vue.component('track', {

    template: '#track-template',

    data: function() {
        return {
            track: ''
        }
    },

    ready: function() {
        this.$http.get('//api.trax.dev/tracks/1', function (data) {
            this.$set('track', data.track)
        })
    }
});

如何将 url/:id 传递到 $http.get 字符串的末尾，以便在加载该路由时动态获取正确的数据，例如：

ready: function(id) {
    this.$http.get('//api.trax.dev/tracks/' + id, function (data) {
        this.$set('track', data.track)
    })
}

【问题讨论】：

标签： javascript jquery ajax vue.js

【解决方案1】：

最佳实践：

index.js(路由器)

{
    path: '/tracks/:id',
    name: 'SingleTrack',
    component: SingleTrack,
    props: (route) => {
        const id = Number.parseInt(route.params.id);
        return { id }
      },
  }

SingleTrack.vue

props: {
 id: {
  type: Number,
  required: true,
 },
},

mounted(){
 this.$http.get('//api.trax.dev/tracks/' +this.id, function (data) {
    this.$set('track', data.track)
 })
}

【讨论】：

【解决方案2】：

你应该可以从组件$route属性中获取路由参数：

var itemId = this.$route.params.id;
this.$http.get('//api.trax.dev/tracks/' + itemId, function (data) {
    this.$set('track', data.track)
})

在vue.js router documentation查看更多详情

【讨论】：

谢谢，这已经奏效了——我确实看过文档，但现在我从你的回答中看到了上下文——谢谢。