vue新页面打开

vue是单页应用，通常只在当单一标签中跳转到各个页面，但有时确实需要在新标签页打开页面，有以下两种方案。

HTML

HTML可采用两种标签<router-link>和<a>。<router-link>虽说是vue-router的通常选择，但在新标签页时，会刷新当前页面，如果当前页面存在form表单，可能会造成数据丢失。<a>标签则不会，但需要配合js完成(可能有不需要js的，但我没试出来)。写法如下：
a标签

<!-- html -->
<a :href="handleRouter(routerName)" target="_blank">跳转到新页面</a>

<!--js-->
handleRouterBlank(val) {
  let href = this.$router.resolve({
    name: val
  });
  return href.href;
},

router-link

<router-link tag="a" 
             target="_blank"
             :to="{ name: 'routerName', query: {params: 111} }">
</router-link>

JS

JS的写法与<a>中js部分相同,{href}表示取object中key为href的value值，所以是一个string

handleRouterBlank(val) {
  let href = this.$router.resolve({
    name: val
  });
  window.open(href.href, '_blank');
},

// 或者
handleRouterBlank(val) {
  let {href} = this.$router.resolve({
    name: val
  });
  window.open(href, '_blank');
},