将 router-link 设置为属性 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>',

将 router-link 设置为属性 Vue.js 中的组件数据

Setting the router-link to attribute with component data in Vue.js

javascript

vue.js

vue-router