vue-router路由跳转与打开新窗口(vue路由跳转原理)

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

推荐整理分享vue-router路由跳转与打开新窗口(vue路由跳转原理)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue路由跳转的几种方式,vue路由跳转的三种方法,vue-router路由跳转,vue3 路由跳转,vue-router路由跳转,vue路由跳转的三种方式及区别,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”);

注意同源问题，需要解决

vue-router的几种跳转方式

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(−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打开新窗口