vue3路由跳转传对象（vue-router路由跳转与打开新窗口）

时间2025-04-29 12:00:12分类IT科技浏览4480

导读：vue-router打开新窗口的方法及跳转方式对比打开新窗口...

vue-router打开新窗口的方法及跳转方式对比

方法1：

const routeUrl = this.$router.resolve({ path: "/targetUrl", query: { id: 96 }, }); window.open(routeUrl.href, "_blank"); },

方法2：

<router-link target="_blank" :to="{ path: /catalog, query: { id: 1 } }" >打开新的标签页</router-link>

如果通过iframe嵌入到其他系统中，这样打开新窗口，会丢掉iframe的壳子，出现有问题

需改为window.parent.open(routeUrl.href, “_blank ”);

注意同源问题，需要解决

this.$router.push()

push向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL

首页 ===》通过直接修改地址来到页面A ===》通过点击按钮，this.$router.push来到页面B

那么这个时候点击浏览器的返回，首先返回到页面A ，再次点击返回才返回到首页

this.$router.replace()

replace不会向 history 添加新记录，而是用心的替换掉当前的 history 记录

首页 ===》通过直接修改地址来到页面A ===》通过点击按钮，this.$router.replace来到页面B

此时点击浏览器的返回，那么会直接回到首页

router.push({ path: /home, replace: true }) this.$router.replace(/home)

上面这两种方法是等效的

router-link标签

<router-link to="/url"></router-link>

等同于调用

router.push(“/url ”)

this.$router.go()

前进或后退，可接收一个数字

this.

(

−

)

：

后

退

；

router.go(-1)：后退； this.

router.go(−1)：后退；this.

router.go(0)：刷新；

this.$router.go(1) ：前进

如果 history 记录不够用，那就默默地失败: this.$router.go(1000)

this.$router.back（）

后退；

this.$router.forward()

前进

this.$router.resolve+window.open打开新窗口