vue-router 居然不帮我路由

Question

vue-router 居然不帮我路由：

<div v-link="'/work/' + {{data.useClass}}" class="itemImg {{data.useClass}}">

浏览器解释后是这样的：

<div class="itemImg x50">

说明{{data.useClass}} vue.js是可以正常解释的，

但v-link="'/work/' + {{data.useClass}}" 中的{{data.useClass}}却不能正常解释：

v-link="'/work/' + x50}"

我想通过这种方法让浏览器路由到：

http://localhost:8000/#!/work/x50  //跳到这个地址

代码结构像这样：

<div class="gridItems w80">

    <template v-for="data in work" id="workVUE">

        <div class="item scrollItem">

            <div v-link="'/work/' + {{data.useClass}}" class="itemImg {{data.useClass}}">

                <div class="gridImg workImg">
                    <img v-bind:src="data.image" />
                </div>
            </div>

            <div class="itemTitle">
                <h3>{{data.title}}</h3>
            </div>

    </template>
</div>

请大家帮助一下，谢谢！

Answer 1

v-link 会自动设置 <a> 的 href 属性。

根据Vue.js 1.0 binding syntax， v-link 不再支持包含 mustache 标签。可以用常规的JavaScript表达式代替 mustache 标签， 例如 v-link="'user/' + user.name" 。

v-link只能作用在a标签上

http://router.vuejs.org/zh-cn/link.html

Answer 2

v-link="'/work/' + {{data.useClass}}"

改为

v-link="'/work/' + data.useClass"

Answer 3

v-link="'/work/' + {{data.useClass}}"

改为

v-link="'/work/' + data.useClass"

已经试过了还是不行，

对于这种跳转：v-link="'user/' + user.name" 结构，在我的问题中就是找不到data.useClass，而data.useClass 用在同一个v-for中的其他地方都能正常渲染。惟独用在v-for中认不到data.useClass，如果我改成一个固定连接，比如v-link="'/work/' + 'detail'}",也可以改变路由，div标签和a标签都没问题。

语法结构看过文档，应该没问题，我开始估计是我的数据来源问题。

所以我又改了v-link形式为

<a v-link="{ name: 'detail', params: { itemName: data.useClass }}">

var lookVue = new Vue({
    el: '.pages',
    data: {

        work: workdv.data(),
        blog: blogdv.data()
    },
});

  '/detail/:itemName': {
    name: 'detail', // 给这条路径加上一个名字
    component: Vue.component('newtemp')
  },

我的天呀，还是不行，问题到底在哪里，是v-for的bug，还是？东东
请大家再赐教。