Router-Link-Router vue in Google Maps Infowindow

Question

Ich habe diese Arbeit in Ordnung bekam, mit der Ausnahme, dass ich möchte haben statt <a> Tag <router-link>-Tag zu verwenden, da <a> Tag im Gegensatz zu <router-link> (das Click-Ereignis abfängt und nicht laden Sie die Seite neu) lädt eine Seite neu.

const contentString = ` 
    <div class="popup"> 
     <a href="/places/${place._id}"> 
      <img src="..." /> 
      <h5>${place.name}</h5> 
      <p>${place.gmap.address}</p> 
     </a> 
    </div>` 

const infoWindow = new google.maps.InfoWindow() 
infoWindow.setContent(contentString) 

Wenn ich <a> Tag für <router-link> ersetzen Sie es macht nicht zu <a> Tag, wie es wäre, wenn die <router-link> in vuejs Vorlage war.

Answer 1

Sie haben Recht. router-link wurde nicht gerendert, da Vue.js keine Chance hatte, es zu rendern. Sie können vue.js Ihre Vorlage zunächst rendern lassen, das gerenderte Ergebnis als Zeichenfolge mithilfe von innerHTML abrufen und dann die Zeichenfolge an Google Maps API (setContent) übergeben.

Ich möchte hier 2 Lösungen anbieten.

1. Die erste ist leicht zu lesen und zu verstehen. Verwenden Sie es einfach als normale Komponente, aber fügen Sie v-show="false" in das Tag ein, damit es in Ihrer Ansicht nicht angezeigt wird. (place kann als Stütze übergeben werden)

   <div id="app"> 
       <api v-show="false" :place="place"></api> 
   </div> 
   

   Vue Beispiel:

   new Vue({ 
       router: new VueRouter({}), 
       el: '#app', 
       data: { 
       place: { 
        id: 1, 
        name: 'awesome-name', 
        address: 'somewhere', 
       } 
       }, 
       components: { 
       api: { 
        props: [ 'place' ], 
        template: ` 
        <div class="api"> 
        <div class="popup"> 
         <router-link :to="'/places/' + place.id"> 
         <h5>{{place.name}}</h5> 
         <p>{{place.address}}</p>   
         </router-link> 
        </div> 
        </div> 
        `, 
       }, 
       }, 
       mounted() { 
       console.log(this.$children[0].$el.innerHTML); 
       //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div> 
       }, 
   }); 
   

2. Wenn Sie nicht wollen, Ihre HTML verschmutzen, können Sie die Komponente vm erzeugen programmatisch durch Vue.extend verwenden, erstellen ein virtuelles Dom, dann mount your vm zu created dom.

   const myComp = Vue.extend({ 
       router: this.$options.router, 
       template: ` 
       <div class="api"> 
       <div class="popup"> 
        <router-link to="/places/${this.place.id}"> 
        <h5>${this.place.name}</h5> 
        <p>${this.place.address}</p>   
        </router-link> 
       </div> 
       </div> 
       `, 
   }); 
   const comp = new myComp().$mount(document.createElement('div')); 
   console.log(comp.$el.innerHTML); 
   //=> <div class="popup"><a href="#/places/1" class=""><h5>awesome-name</h5> <p>somewhere</p></a></div> 
   

Ich kombinierte Lösungen, die oben in einem fiddle, bitte einen Blick haben.