Question

我的工作正常，但我希望代替<a>代码使用<router-link>代码，因为<a>标记不像<router-link>（其中拦截click事件并且不重新加载页面）重新加载页面。

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>的{{1}}代码，则<router-link>标记不会呈现<a>代码，如果<router-link>位于vuejs模板中那样。

Answer 1

你是对的。 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，然后将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>

我将上述解决方案合并到fiddle，请看一下。

vue路由器在google maps infowindow中的路由器链接

1 个答案: