单页应用vue-router路由跳转时打开新的浏览器窗口跳转

需求效果

实现代码

只需要在router-link上添加target="_blank"属性，或者函数式导航中，获得跳转地址，通过window.open(href, ‘_blank’)实现打开新窗口跳转

<template>
  <div id="app">
    <nav>
      <span>Home</span> |
      <span @click="handleClick">About</span>
      <!-- <router-link to="/about" target="_blank">About</router-link> -->
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleClick () {
      const { href } = this.$router.resolve({ path: '/about' })
      window.open(href, '_blank')
    }
  }
}
</script>

思考

开始以为这是个很难很复杂的需求，上升到单页/多页的层面，后来想明白了发现是自己想多了。

这个需求，和我们平时的一个操作很类似：我们用vue创建了一个单页应用，通过run在本地起了一个web服务localhost:8080，我们在浏览器中，打开一个窗口访问localhost:8080能够访问应用；我们再打开一个浏览器窗口访问localhost:8080也可以访问应用。

只不过，现在是在A窗口访问localhost:8080，在B窗口访问localhost:8080/about，两个访问都会向同一个web服务器请求同一个应用资源，按照路由路径和路由设置渲染对应的页面。

至于A窗口的应用，和B窗口的应用，是不是同一个，比如vuex的状态是不是相同的，这点还没有验证，不过我认为是应用是相同的，但不是同一个。就好比，一个vue类，创建了两个实例。