javascript - 如何在 Vue.js 中传递动态页面 :id to $http. 获取 url

Question

我已经设置了 View 路由器:

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)
    })
}

Answer 1

您应该能够从组件 $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 中查看更多详细信息