Vue.js |爬虫无法跟随 v-for 生成的链接答案

【问题标题】：Vue.js | Crawlers are not able to follow v-for generated linksVue.js |爬虫无法跟随 v-for 生成的链接
【发布时间】：2016-04-16 14:01:17
【问题描述】：

我有一个使用 Laravel 和 Vue.js 来呈现列表的小站点。可以here查看。 Google 爬虫似乎无法追踪v-for 生成的链接。

Google Search Console 说：Not found: vergleichen/%7B%7B%20anbieter.slug%20%7D%7D 和我知道的所有页面抓取工具都无法抓取链接。

我做错了什么？有解决方法吗？任何帮助表示赞赏♥

更新

@Linus：你的假设是正确的，this 是我的刀片文件的内容，JS 看起来像这样：

var suche = new Vue({
   el: '#suchen',
   data: {
        search: ''
     }
});

所以我必须create a new component 才能让它工作？

更新

我切换到Hideseek。问题“解决了”。

【问题讨论】：

您似乎创建了这样的链接：href="{{anbieter.slug}}"，谷歌爬虫会在 Vue 将其替换为实际内容之前对其进行解析。为什么，我只能假设您在页面 HTML 中直接拥有该标记，而不是在模板中？您能否提供有关您的#app 结构的代码？
嗨，Linus，我更新了我的问题

【解决方案1】：

谷歌爬虫会在 Vue 替换 {{anbieter.slug}} 之前解析你的 HTMl

您可以将#app 元素的内容提取到一个<template> 元素中，google 应该忽略该元素，并将此元素设置为 Vue 的模板。

这应该确保Vue会先解析模板，插入到DOM中，然后爬虫才能解析链接。

虽然未经测试。

例子：

var App = new Vue({
  el: '#app',
  template: '#main',
  data() {
    return {
        test: 'Test'
    }
  }
})

HTML：

<div id="app">
  <!-- nothing here, content will come from the <template> below. -->
</div>
<template id="main">
  {{test}}
</template>

要支持 IE9，请使用 <script type="x-template"> 而不是 <template>

【讨论】：