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