Question

我正在使用Vue根据输入的位置获取商店位置。这是Vue组件：

Vue.use(VueGoogleMaps, {
  load: {
    key: 'key',
    libraries: 'places'
  }
});

new Vue({
  el: '.branch-locator',
  data: {
    autocompleteRestrictions: {
      country: 'gb'
    },
    searching: false,
    branches: []
  },
  methods: {
    search(location) {
      this.searching = true;
      Axios.post('/branch-locator', location.geometry.location)
        .then((response) => {
          this.searching = false;
          this.branches = response.data;

          const bounds = new google.maps.LatLngBounds()
          for (let branch of this.branches) {
            bounds.extend({
              lat: branch.lat,
              lng: branch.lng
            })
          }
          this.$refs.map.$mapObject.fitBounds(bounds)
        })
        .catch(function (error) {
          this.searching = false;
        });
    }
  },
  components: {
    VueGoogleMaps
  },
});

这是HTML：

{% verbatim %}
<h4>{{ branch.title }}</h4>
<p><a :href="branch.store_link" target="_blank">Store locator</a> | <a :href="branch.maps_link" target="_blank">View on Google Maps</a></p>
{% endverbatim %}

这可以按预期工作，从实际意义上来说完全没问题。但是网页抓取工具将“branch.store_link”等检测为断开的链接，因为Vue没有及时运行我假设。什么是最简单的避免网络抓取工具将这些链接作为断开链接？

Answer 1

尝试using v-cloak。

声明CSS：

[v-cloak] {
  display: none;
}

并将指令添加到您的实例：

<div class="branch-locator" v-cloak>

这样它将被隐藏，直到Vue处理它，因此爬虫不应该拾取它。

网络爬虫检测Vue断开的链接

1 个答案: