[JavaScript知识库]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(0)：刷新；
this.$router.go(1) ：前进

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

this.$router.back（）

后退 ；

this.$router.forward()

前进

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

开发者涨薪指南

48位大咖的思考法则、工作方式、逻辑体系