github上也提了个issue：https://github.com/vuejs/vue-router/issues/319

下面请听我娓娓道来，首先我有一个萌萌哒Vue侧边栏组件

class Sidebar extends VueComponent{
    constructor(options){
        super(options,{
            template: require("./index.jade")
            , data:{
                items:Object.keys(router).map(key=>{
                    return {route:key,name:router[key].name}
                })
            }
        })
    }
}

首先

模板文件长这样子

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" v-link="{ path:'{{item.route}}' }")="{{item.name}}"

我得到的结果,v-link神秘失效的

xxx
aaa

于是我又试了下

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" data-v-link="{ path:'{{item.route}}' }")="{{item.name}}"

xxx
aaa

说明v-link确实是被传进去了的

然后我又

p.col-sm-3
    a(class="btn btn-secondary btn-block" v-link="{ path:'haha' }")="why!"
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" v-link="{ path:'{{item.route}}' }")="{{item.name}}"

why
xxx
aaa

直接填写v-link是有效果的

最后我终于找到了一个透明胶勉强解决

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" href="#!{{item.route}}")="{{item.name}}"

xxx
aaa

又找到了个透明胶，这样可以用v-link提供的一些属性

let routerButtons = routerObjects.reduce((previousValue, obj)=>{
    return previousValue+`${obj.name}`
},"")

class Sidebar extends VueComponent{
    constructor(options){
        super(options,{
            template: `

                ${routerButtons}
            
`
            , data:{

            }
        })
    }
}

这样肯定不是最好的方法，只是勉强解决了。

于是来问下大家

问题解决

看来特殊的属性是不能用{{}}的

p.col-sm-3
    template( v-for="item in items" )
        a(class="btn btn-secondary btn-block" v-link="item" v-text="item.name")