Question

我使用vue make single page，我希望每个网格项的v-link路径不同。

现在它是这样的：

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

我想这样：

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

v-link的data.title无法找到，但v-for data -title在其他节奏下工作正常。

她是我的代码

＆＃13;

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')

＆＃13;

<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>

＆＃13;

由于缺乏对路线的了解，结果往往与我想的不一样，所以请帮忙。 PLZ修复我的代码，谢谢+++

Answer 1

使用Vue2，您可以结合使用属性绑定（：to）

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

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

1 个答案: