Vue.js /Crawler无法跟踪v生成的链接

Question

我有一个小网站，它使用Laravel和Vue.js来呈现一个列表。您可以查看它这里。看起来谷歌爬虫无法跟踪v-for生成的链接。

Google说：Not found: vergleichen/%7B%7B%20anbieter.slug%20%7D%7D和我认识的所有页面爬虫都无法抓取链接。

我做错什么了？有解决办法吗？任何帮助都是非常感谢的♥

更新

@Linus:您的假设是正确的，这是我的刀片文件的内容，JS看起来如下：

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

所以我得用创建一个新组件才能让它正常工作？

更新

我转到希切克。问题“解决了”。

Answer 1

google爬虫在Vue取代HTMl之前解析您的{{anbieter.slug}}

您可以将#app元素的内容提取为<template>元素(谷歌应该忽略该元素)，并将该元素设置为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>

小提琴：https://jsfiddle.net/Linusborg/an49og18/