vue路由打开新窗口

项目开发中遇到使用vue打开新窗口的操作，查了网上有以下3种方法：

参考地址：https://www.cnblogs.com/zhangruiqi/p/9266704.html

一、<router-link>标签实现新窗口打开：

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

<router-link  tag="a"  target="_blank"  :to="{ name: '张三', params:{catId:0} , query:{keywords:'手机'} }">打开一个新窗口</router-link>

　　(注：这个方法没用过，有机会可以尝试一下)

二、编程式导航

有些时候需要在单击事件或者在函数中实现页面跳转，那么可以借助router的实例方法，通过编写代码实现。我们常用的是$router.push 和 $router.go，但是 vue2.0 以后，这种方式就不支持新窗口打开的属性了。以下使用$router.resolve这种方法实现新窗口打开，代码如下：

methods: {
  goTablePage(params) {
    let jg_name = params.name;
    let dclx = params.seriesName;
    let routerdata = this.$router.resolve({
        name: "detail", //此name就是基金对比页面path的name,在router里边配好的该页面的名字，这样直接就可以匹配到该页面的路径
        params: {
            jg_name: encodeURI(encodeURI(jg_name)),
            dclx: encodeURI(encodeURI(dclx))
        }
    });
    let newhref = routerdata.href + "?jg_name=" + encodeURI(encodeURI(jg_name)) + '&dclx=' + encodeURI(encodeURI(dclx));
    window.open(newhref, "_blank");
    },  
}

使用路由对象的resolve方法解析路由，可以得到 location、router、href 等目标路由的信息。得到的href就可以使用window.open打开新窗口了。

三、直接使用 a 标签

<a href="http://localhost: 8088/"  target="_blank"> {{msg}} </a>