A new window opens on the Vue Router

This article has participated in the good article call order activity, click to see: back end, big front end double track submission, 20,000 yuan prize pool for you to challenge!

1. The < router-link > TAB opens a new window

< router-link > does not support the target=”_blank” attribute. If you want to open a new window, you must use the < a > tag. The vuE2 version of < router-link > supports the target=”_blank” attribute (tag=”a”).

<router-link target="_blank" :to="{path:'/about',query:{id:deviceId}}"> about < / router - the link ><script>
export default {
  data(){
    return{
      deviceId:'123456'}}}</script>
Copy the code

2. Programmatic navigation

There are times when you need to do a page jump in a click event or in a function, and you can do it by writing code using the router’s example method. $route.resolve: $route.resolve: $route.resolve: $route.resolve: $route.resolve: $route.resolve: $route.resolve: $route.resolve: $route.resolve

<button @click="gotest1"> button < / button >gotest1(){
   let deviceId = '56789'
   let routeData = this.$router.resolve({
      query: {id:deviceId},
      path:'/test1'
   });
   window.open(routeData.href, '_blank');
}
Copy the code