vue.js - Vue-router：循环v-link问题

问题描述

问 题

正常写死v-link，路由是正常的

<a v-link="{ path: '/home', activeClass: 'active'}">Home</a>
<a v-link="{ path: '/add'}">Add</a>

现在路由地址是循环的就会报错

data : function() {
    return {
        navs: [
            {name : 'Home', url:'home'},
            {name : 'Add', url:'add'}
        ]
    }
}

<span v-for="i in navs">
<a class="list-group-item"  v-link="{ path: '/{{i.url}}'}">{{i.name}}</a>
</span>

[Vue warn]: v-link="{ path: '/{{i.url}}'}": attribute interpolation is > not allowed in Vue.js directives and special attributes. (found in > component: <router-app>)

解决方案

v-link="{ path: '/'+i.url}"

这篇关于vue.js - Vue-router：循环v-link问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！