【Vue3】外部サイトからの遷移でクエリパラメータを受け取る（Vue Router4）

概要

• Vue3.0系（Vue Router4）で実装するにあたり、他ページから遷移してきた際に、クエリパラーメータを取得する方法

注意点

• 今回は簡潔に書くためにRouter周りもmain.tsに書いているが他に分割した方が望ましい
• セキュリティの観点からは最悪なソースですw　あくまで説明用のため

サンプルコード

下記はmain.tsを想定しています.

import { createApp } from 'vue'
import { createRouter } from 'vue-router'
import Login from './components/templates/LoginTemplate.vue'
import App from './App.vue'

const router = createRouter({
  routes: [
    { path: '/', component: App },
    { path: '/login', component: Login },
  ]
})

router.beforeEach((to, from, next) => {
  // toからqueryを取得できます
  const auth = to.query.auth
  if (!auth) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  }
})

const app = createApp(App)
app.use(router)
app.use(Store)
app.mount('#app')

解説

まずVue Router4ではcreateRouterを使ってルーターインスタンスを生成します.

const router = createRouter({
  routes: [
    { path: '/', component: App },
    { path: '/login', component: Login },
  ]
})

beforeEachはそれぞれの画面に遷移する前に行う処理を記述できます.
下記の処理は、もしクエリパラメータとしてauthがなければログイン画面にリダイレクトさせるというものです.
詳しい説明は省きますがto、fromはいずれもRouteLocationNormalizedというオブジェクトです. そのオブジェクトのメンバーの１つとしてqueryがあるので、そこから取得をします.

router.beforeEach((to, from, next) => {
  // toからqueryを取得できます
  const auth = to.query.auth
  if (!auth) {
    next({ path: '/login', query: { redirect: to.fullPath } })
  }
})

参考

• API Reference: https://next.router.vuejs.org/api/index.html

あとがき

Vue3.0系はまだまだ参考になる記事が少ないですね。
Vueエンジニアの方々一緒に頑張りましょう〜