VUE路由器在谷歌地圖路由器鏈路信息窗口

我得到這個工作的罰款，但我一直想，而不是<a>標籤使用<router-link>標籤，因爲標籤<a>不像<router-link>（其攔截單擊事件和不重新加載頁面）重新加載頁面。VUE路由器在谷歌地圖路由器鏈路信息窗口

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)

如果我更換<a>標記爲<router-link>它不因爲它會如果<router-link>在vuejs模板渲染到<a>標籤。

來源

2017-08-14 ridjis

請給我一個小提琴，或者至少粘貼與vue相關的代碼片段嗎？很難找到爲什麼標籤不能與您現在提供的信息一起呈現的原因。 – choasia

[鏈接至要點GoogleMaps.vue]（https://gist.github.com/ridjis/5c4e40897b261bc949fca0ff300614e0）這非常關乎它。 Vue組件太簡單了，唯一的問題是我可以看到Google的API會接受一個字符串並呈現它，我認爲它與vue無關，但不知何故，我想知道Vue是否有辦法克服侷限性。 – ridjis

你說得對。 router-link未呈現，因爲Vue.js沒有機會呈現它。您可以先讓vue.js呈現您的模板，使用innerHTML以字符串形式呈現結果，然後將該字符串傳遞給Google Maps API（setContent）。

我想在這裏提供2個解決方案。

第一個很容易閱讀和理解。只要將它用作普通組件，但在標籤中添加v-show="false"，以便它不會出現在您的視圖中。（place可以作爲道具被傳遞）

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

Vue的實例：

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> 
    }, 
});

如果你不想污染你的HTML，您可以通過編程使用Vue.extend生成組件的VM，創建一個虛擬的dom，然後將你的虛擬機安裝到創建的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>

我結合上面的fiddle解決方案，請看看。

來源

2017-08-16 09:23:25 choasia

我使用單一文件組件與僅限運行時構建，因此第二個解決方案無法實現。如何在僅運行時編譯器中擴展vue組件，這有可能嗎？ – ridjis

@ridjis是的。由於vue-loader能夠將SFC中的模板轉換爲渲染函數，因此您可以將組件（在我的示例中爲'api'）定義爲SFC。 – choasia

VUE路由器在谷歌地圖路由器鏈路信息窗口

回答

相關問題