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>
请大家帮助一下,谢谢!
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
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,还是?东东
请大家再赐教。
v-link="'/work/' + {{data.useClass}}"
改为
v-link="'/work/' + data.useClass"