【Vue】路由打开新窗口

Vue实现路由跳转新窗口打开
1、标签实现新窗口打开：
官方文档中说 v-link 指令被 组件指令替代，且 不支持 target="_blank" 属性，如果需要打开一个新窗口必须要用 < a > 标签，但事实上vue2版本的 < router-link > 是支持 target="_blank" 属性的(tag=“a”)，示例如下：

<router-link 
	tag="a" 
	target="_blank" 
	:to="{name:'homePage',query:{id:'Fate'}}">
	I'm Fate
</router-link>
<!--注：只有tag="a"模式下  target="_blank" 属性才会生效。-->

2、函数实现跳转
有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的示例方法，使用 $router.resolve 这种方法能够实现新窗口打开，示例代码如下：

<template>
  <div id="demo">
    <span @click="()=>{ linkTo() }"></span>
  </div>
</template>
<script>
export default {
  name: "index",
  methods: {
    linkTo(){
    	let query = { id : "Fate" };
    	let routeData = this.$router.resolve({
		   name: "searchGoods",
		   query: query,
		});
		window.open(routeData.href, '_blank');
    }
  }
};
</script>