How to Open a Page in a New Window with Vue Router [VUE.JS]

This article explains how to display a page in a new window when working with Vue.js.

That said, it's a simple implementation since it just uses standard JavaScript.

BASIC USAGE (VUE.JS ONLY, NO ROUTER)

// html
<button type="button" @click="linkToOtherWindow('遷移先URL')">ボタン</button>

// script
export default {
  methods: {
    linkToOtherWindow (url) {
      window.open(url, '_blank')
    }
  }
}

It's simply a matter of passing the URL to `window.open`.

I don't anticipate any issues. Since it's just opening in `_blank`, implementation is only necessary when you need to call a method.

HOW TO OPEN A NEW WINDOW USING VUE ROUTER

Opening a new window through Vue Router requires an extra step.

You'll need to resolve the URL beforehand using `router.resolve`.

This allows you to pass data via query parameters or route params.

The generated URL can be retrieved from `resolvedRoute.href`.

//プロフィールページのroutingの設定の場合
const Profile= {
    template: '<div>Profile No.{{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/profile/:id',name='profilePage', component: Profile}
  ]
})

// script window.open に解決されたurlを渡す
export default {
  methods: {
    linkToOtherWindow() {
      let resolvedRoute = this.$router.resolve({
        name: profilePage,
        params: {id: "someData"}
      });
      window.open(resolvedRoute.href, '_blank');
    }
  }
}

POSSIBLY USABLE FROM VUE 3 (UNVERIFIED)

<router-link :to="{ name: 'profilePage'}" target="_blank">
   LINK TO OTHER WINDOW
</router-link>

I've used ES6 syntax for the method definitions this time. If you're linting with ES5, you might run into issues.

RECOMMENDED VUE.JS BOOKS

While I do read books, I truly feel that implementing things on the job leads to deeper learning.

Conversely, if you focus solely on implementation, you might miss opportunities to think about better coding practices, so I recommend revisiting books as well.

For those with some knowledge of JavaScript and Vue.js.