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. $r o u t e r . g o (- 1) ：后退； t h i s .$ router.go(0)：刷新；
this.$router.go(1) ：前进

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

this.$router.back（）

后退；

this.$router.forward()

前进

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

vue-router路由跳转与打开新窗口相关推荐

html在父窗口中打开新页面跳转,路由跳转、打开新窗口、跳转到新页面
基础不扎实,温故知新下方案一: getDescribe(id) { // 直接调用$router.push 实现携带参数的跳转 this.$router.push({ path: `/describ ...
vue 路由跳转并打开新页面
let id ='123'; const {href} = this.$router.resolve( { path: '/home/test',query: {id: id}} ) window.o ...
页面跳转与打开新窗口的方法---前端
JS页面跳转与打开新窗口的方法-前端 JS页面跳转与打开新窗口的方法-前端## 标题
vue 路由跳转页面打开新页面_vue-router跳转时打开新页面的两种方法
vue-router跳转时打开新页面的两种方法最近还是在痛苦的挣扎中挣扎吧记录一下在vue项目中如何实现跳转到一个新页面(一个比较简单又比较基础的问题了),有两个方法: 1.标签实现新窗口打开 ...
JavaScript跳转和打开新窗口
跳转: window.location.href = "www.baidu.com" // 跳转到百度首页,不打开新的浏览器窗口等价于html中的<a href=&quo ...
vue router 路由跳转方法概述
一.概述使用到Vue的项目,我们最常见使用的就是Vue配套的Vue Router库. 那么在平日开发中,有多少种跳转路由的方法? 二.跳转方法 1.使用router-link标签使用router- ...
vue -- router路由跳转错误 , NavigationDuplicated
vue-router ≥3.0版本回调形式以及改成promise api的形式了,返回的是一个promise,如果路由地址跳转相同, 且没有捕获到错误,控制台始终会出现如图所示的警告 (注:3.0以下 ...
前端篇 -- 链接跳转，打开新窗口和本窗口
在新窗口打开连接方式超链接<a href="www.123.com" title="123" target="_blank">1 ...
vue页面跳转没有ajax,vue router路由跳转了，但是页面没有变（已解决）
IOS开发:监听来电状态的改变. #import #import @property(nonato ... salesforce 零基础学习(三十)工具篇:Debug Log小工具开发中查看log日 ...

vue-router路由跳转与打开新窗口

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

打开新窗口

vue-router的几种跳转方式

vue-router路由跳转与打开新窗口相关推荐

最新文章

热门文章