位置: IT常识 - 正文
vue-router路由跳转与打开新窗口(vue路由跳转原理)
编辑：rootadmin推荐整理分享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打开新窗口
上一篇：Vue路由跳转传参或打开新页面跳转(vue页面路由传参)
下一篇：jar启动指定JDK/JRE 安装路径教程(jar启动指定启动类)
