Open link in new window with Vuetify v-btn and Vue router

问题

Recent versions of Vue Router allow for links that open in a new tab, e.g. the following

<router-link :to="{ name: 'fooRoute'}" target="_blank">
  Link Text
</router-link>

correctly renders an <a target="_blank">.

However, the same doesn't seem to work with a Vuetify v-btn, which supports router paths, for example if we want to use an icon.

<v-btn icon :to="{ name: 'fooRoute'}" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

Despite the component rendering an <a>, there is no target="_blank" attribute. How can we make this work?

回答1:

Try the following code snippet

<v-btn icon href="/fooRoute" target="_blank">
  <v-icon>window</v-icon> Link Text
</v-btn>

Vuetify Button API

来源：https://stackoverflow.com/questions/49654527/open-link-in-new-window-with-vuetify-v-btn-and-vue-router