Vue.js |爬行者无法关注v-for generated链接

Question

我有一个使用Laravel和Vue.js渲染列表的小站点。你可以查看它here。它看起来像Google抓取工具无法关注由v-for生成的链接。

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

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

更新

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

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

所以我要create a new component为了得到这个方面的工作？

更新

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

Answer 1

在谷歌爬虫分析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/