用于使用数据的vue-router v-link

Question

I use vue make single page , I want each grid item`s v-link path diffrent.

Now it's like this：

<div v-link="'/detail/' + 'work'" class="itemImg">

I want like this:

<div v-link="'/detail/' + data.title " class="itemImg">

the v-link`s data.title can not find, but data.title in v-for other pace work fine.

her is my code

 var png = ".png" var jpg = ".jpg" var HtmlFormat = ".html" // WORK var db = new loki('workDB.json'); var workCol = db.addCollection('workCol'); var workNames = ["x50", "glmg", "ring", "iwatch", "moto", "edge", "i8", "nike", "shave", "house"]; var workWebglFolder = "assets/webgl/"; var workHtmlFolder = "pages/work/"; var workImgFolder = "img/workImg/"; var workImgkUrls = []; var workHtmlUrls = []; var workTitles = []; var workSummary = []; $.each(workNames, function(index, title) { var workWebglUrl = workWebglFolder + title; var workHtmlUrl = workHtmlFolder + title + HtmlFormat; var workimgkUrl = workImgFolder + title + png; var workOBJ = {}; workOBJ.id = index; workOBJ.useClass = title; workOBJ.title = title; workOBJ.link3d = workWebglUrl; workOBJ.link = workHtmlUrl; workOBJ.image = workimgkUrl; workCol.insert(workOBJ); var useClass = "." + title; workHtmlUrls.push(workHtmlUrl); workImgkUrls.push(workimgkUrl); $.ajax({ url: workHtmlUrl, async: false, success: function(data) { title = $(data).filter('title').text(); summary = $(data).filter(useClass).text(); workOBJ.title = title; workOBJ.summary = summary; } }); }) // BLOG var db = new loki('blogDB.json'); var blogCol = db.addCollection('blogCol'); var blogNames = ["waveLoader", "playcanvas-introduce", "lokiJS", ]; var blogHtmlFolder = "pages/blog/"; var blogImgFolder = "img/blogImg/"; var blogImgkUrls = []; var blogHtmlUrls = []; var blogTitles = []; var blogSummary = []; $.each(blogNames, function(index, title) { var blogHtmlUrl = blogHtmlFolder + title + HtmlFormat; var blogimgkUrl = blogImgFolder + title + jpg; BJ.useClass = title; blogOBJ.title = title; blogOBJ.link = blogHtmlUrl; blogOBJ.image = blogimgkUrl; blogCol.insert(blogOBJ); var useClass = "." + title; blogHtmlUrls.push(blogHtmlUrl); blogImgkUrls.push(blogimgkUrl); $.ajax({ url: blogHtmlUrl, async: false, success: function(data) { title = $(data).filter('title').text(); summary = $(data).find('.summary').text().substring(0,200) + "..."; blogOBJ.title = title; blogOBJ.summary = summary; } }); }) // db.saveDatabase(function () { // console.log("save db") // }); var workdv = workCol.addDynamicView('workCol_view'); workdv.applyWhere(function customFilter(obj){ return obj.id > -1; }); workdv.applySimpleSort('id') var blogdv = blogCol.addDynamicView('blogCol_view'); blogdv.applyWhere(function customFilter(obj){ return obj.id > -1; }); blogdv.applySimpleSort('id') //USE VUE GET LOKIJS DATA var lookVue = new Vue({ el: '.pages', data: { work: workdv.data(), blog: blogdv.data() }, }); console.log(lookVue.work[0].title) var notFound = Vue.extend({ template: '<h1>Not Found</h1>' + '<router-view></router-view>' }) var workComponent = Vue.extend({ template: '<h1>Work</h1>' + '<router-view></router-view>' }) var blogComponent = Vue.extend({ template: '<h1>Blog</h1>' + '<router-view></router-view>' }) var aboutComponent = Vue.extend({ template: '<h1> aboutComponent </h1>' + '<a v-link="{ path: \\'/subroute\\' }" class="btn btn-lg btn-primary" role="button">View SubRoute</a>' + '<router-view></router-view>' }) var contactComponent = Vue.extend({ template: '<h1> 联系 </h1>' + '<router-view></router-view>' }) var detail = Vue.extend({ template: '<h1>Navbar example</h1>' + '<p>This example is a quick exercise to illustrate how the default, static and fixed to top navbar work. It includes the responsive CSS and HTML, so it also adapts to your viewport and device.</p>' + '<p>To see the difference between static and fixed top navbars, just scroll.</p>' }) Vue.config.debug = true; Vue.use(VueRouter) var router = new VueRouter({ history: false, hashbang:true, // saveScrollPosition:true, root: '/' }) Vue.component('newtemp', { template: '#workVUE', route: { data: function(transition) { transition.next({ // saving the id which is passed in url to $data itemName: transition.to.params.itemName }); } }, data: function() { return { itemName:itemName, } }, }) router.map({ // '*': { // component: notFound // }, '/': { component: workComponent, subRoutes: { '/detail': { component: detail } } }, '/work': { component: workComponent, subRoutes: { '/detail': { component: detail } } }, '/blog': { component: blogComponent, subRoutes: { '/detail': { component: detail } } }, '/about': { component: aboutComponent, subRoutes: { '/detail': { component: detail } } }, '/contact': { component: contactComponent }, '/detail/:itemName': { name: 'detail', // 给这条路径加上一个名字component: Vue.component('newtemp') }, }); var App = Vue.extend() router.start(App, 'body') 

 <template v-for="data in work" id="workVUE"> <div class="item scrollItem"> <div v-link="'/detail/' + 'work'" class="itemImg"> <div class="gridImg workImg"> <img v-bind:src="data.image" /> </div> </div> <div class="itemTitle"> <h3>{{data.title}}</h3> </div> <div class="itemTag"> <div class="tagTitle"> <ul class="tagName"> <li class="tagTip"><h3> 标签: </h3> </li> <li><h3 class="pageName"> {{data.useClass}} </h3> </li> <li><h3> {{data.tag}} </h3> </li> </ul> <div class="titlePos"> <h3>titlePos</h3> </div> </div> </div> <ul class="info"> <li class="infoItem infoTitle"> <h3>{{data.title}}</h3> </li> <li class="infoItem infoCont"> <h3>{{data.date}}</h3> <h3>作者：laishi</h3> </li> </ul> <ul class="bar"> <li class="barItem barMark"> <div> <i class="fa fa-bookmark" aria-hidden="true"></i> </div> </li> <li class="barItem"> <dir> <a class="moreLink" v-bind:href="data.link3d"> <h3> 3D </h3> </a> </dir> </li> <li class="barItem barInfo"> <div> <i class="fa fa-info"></i> </div> </li> </ul> </div>{{ }} </template> 

Due to the lack of knowledge of the route, the results are often not the same as I think, so please help. plz fix my code ,thanks+++

Answer 1

With Vue2 you can use in combination with attribute binding (:to)

<li v-for="project in projects">
  <router-link :to="'/project/' + project.id">{{project.name}}</router-link>
</li>