vue 新建页面打开的两种方式

vue作为单页app，基本上所有的页面跳转全是在当前页完成的，但是，也不能排除新建页面打开的需求。

我们平时路由跳转都是直接push，replace这些

this.$router.push({name:"xxx"})；

那么新建页面跳转怎么写呢？

router-link跳转

 <router-link :to="{name:'xxx'}" target="_blank">新建页面</router-link>

给router-link添加target="_blank"即可。

js跳转

router-link跳转方便，但是灵活性不强，如果需要复杂的计算啥的，就不能直接用了，所以官方提供了一个api叫：router.resolve()

这个方法使用时传入的参数就和你平时跳转路由参数一个，是一个对象。

this.$router.resolve({name:"xxx"});

但是resolve并不会进行页面跳转，而是返回一个生成的路由信息对象，也就是你将要跳转到的那个路由的对象，我们可以通过返回的这个对象拿到一些信息：

1. href 路由的完整路径（不带域名端口）
2. location 跳转至新路由所传的参数对象
3. route 跳转至新路由的那个路由对象（等同于this.$route）

还有两个基本也用不到了，有需要自己console输出看下就行了。

于是乎：

const resolved = this.$router.resolve({name: 'xxx'});
window.open(resolved.href,'_blank');

这样就行了。

注意：

href并不是完整的网址，他是一个路径，不带域名和端口的，而window.open中，如果url地址不带端口和域名，默认就是用当前页面的域名和端口，所以新建页面跳转是没问题的。