在 Vue.js 中将路由器链路设置为组件数据的属性

Question

如何在<router-link to="...">中注入组件数据？样本：

var data = {files: [{name: "test", path: "/test"}]};
var component = {
    data: function() {
        return data
    },
    template: '<ul class="files"><li v-for="file in files"><router-link to="{{ file.path }}">{{ file.name }}</router-link></li></ul>',
    created: function() {...}
};

在此示例中，输出为 <li><a href="#/{{ file.path }} ">test</a></li> 。如何获得/test而不是#/{{ file.path }}？

Answer 1

你使用了错误的语法，你只需要使用 v-bind 如下：

template: '<ul class="files"><li v-for="file in files"><router-link v-bind:to="file.path">{{ file.name }}</router-link></li></ul>',

或者简而言之：

template: '<ul class="files"><li v-for="file in files"><router-link :to="file.path">{{ file.name }}</router-link></li></ul>',