木灵鱼儿

木灵鱼儿

阅读:534

最后更新:2021/03/17/ 15:32:22

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地址不带端口和域名,默认就是用当前页面的域名和端口,所以新建页面跳转是没问题的。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 534

相关文章