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路由器在谷歌地图路由器链路信息窗口

回答

相关问题