How to open a page in a new window by Vue router

1. <router link>tag to open a new window:

The official document says that the V-link directive has been replaced by a new & lt; router link & gt; component directive, which has been completed by the component in Vue 2.

Note: <router link> does not support target = "_Blank ", if you want to open a new tab, you must use the <a> tab.

But in fact, vue2 version of <router link>supports target = “_The “blank” attribute (tag = “a”) is as follows:

1 <router-link target="_blank" :to="{path:'/home',params:{id:'8'}}">open home in a new page</router-link>

2. Programming navigation:

Sometimes it is necessary to realize page Jump in click event or function, so you can use the example method of router to realize it by writing code.

What we often use is$ router.push And$ router.go However, after vue2.0, this method does not support the properties of new window opening. This is the time to use this$ router.resolve , as follows

 1    goToLoanOrderDetail(loanOrderId, userId) {
 2       let routeData = this.$router.resolve({
 3         name: 'orderDetail',
 4         params: { loanOrderId, userId }
 5       });
 6       window.open(routeData.href, '_blank');
11     }

Just click the event to call this method

Read More: