Веб-сканер обнаруживает неработающие ссылки vue

Я использую 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 не запускается вовремя, я полагаю. Что было бы проще всего, чтобы поисковые роботы не воспринимали их как неработающие ссылки?

0
0
182
1

Ответы 1

Попробуйте с использованием v-cloak.

Объявите CSS:

[v-cloak] {
  display: none;
}

И добавьте директиву в свой экземпляр:

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

Таким образом, он будет скрыт до тех пор, пока Vue его не обработает, поэтому поисковый робот не должен его подбирать.

Другие вопросы по теме