Vue Router实现新窗口打开的三种方法

<template>
  <router-link 
    to="/new-page" 
    target="_blank"
    rel="noopener noreferrer"
  >
    打开新窗口
  </router-link>
</template>

<template>
  <button @click="openNewWindow">编程式导航打开</button>
</template>

<script>
export default {
  methods: {
    openNewWindow() {
      const route = this.$router.resolve({
        path: '/new-page',
        query: { id: 123 }
      });
      window.open(route.href, '_blank', 'noopener,noreferrer');
    }
  }
}
</script>

<template>
  <button @click="nativeOpenNewWindow">原生方式打开</button>
</template>

<script>
export default {
  methods: {
    nativeOpenNewWindow() {
      window.open(
        `${window.location.origin}/new-page?id=123`,
        '_blank',
        'noopener,noreferrer'
      );
    }
  }
}
</script>

import Vue from 'vue'
import Router from 'vue-router'
import NewPage from '../views/NewPage.vue'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/new-page',
      name: 'NewPage',
      component: NewPage
    }
  ]
})