Vue 路由器的路由器链接在谷歌地图信息窗口中

Question

我的工作正常，除了我想代替<a>标签使用<router-link>标签，因为<a>标签不像<router-link>(它拦截点击事件并且不重新加载页面(重新加载页面。

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>标签。

Answer 1

你是对的。router-link没有渲染，因为 Vue.js没有机会渲染它。你可以让 vue.js 先渲染你的模板，使用innerHTML将渲染结果作为字符串获取，然后将字符串传递给 Google Maps API(setContent(。

我想在这里提供 2 种解决方案。

1. 第一个易于阅读和理解。只需将其用作普通组件，但在标记中添加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>
   },
   });
   

2. 如果不想污染 html，可以使用Vue.extend以编程方式生成组件的 vm，创建一个虚拟 dom，然后将 vm 挂载到创建的 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>
   

我在小提琴中结合了上面的解决方案，请看一下。