vue routerのナビゲーションガード機能を利用して外部サイトへリダイレクトする方法 メモ

• 検査目的で外部サイトへのリダイレクト機能を持つモックアプリをVue.jsで作る必要があり、その実現方法を調べた。

実現方法

• ナビゲーションガード機能のルートガードbeforeEnterとwindow.locationを組み合わせる。

ナビゲーションガード

• 画面遷移(ナビゲーション)を制御するためのフック機能。

• ルートガードメソッドbeforeEnter

  • ルートの遷移前に実行されるメソッド。
  • ここでwindow.locationで遷移先を指定して、リダイレクトさせる。

window.location

• 現在表示しているWebページの位置情報を表すプロパティ。
• 新しい値を代入することで、その値(ページ)に遷移させることができる。

実装

• router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../components/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    component: Home
  },
	... ,
  {
    path: '/external_site',
    name: 'external',
    beforeEnter() {
      window.location = "https://www.example.com/top"
    }
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

参考情報

• VueJs vue-router linking an external website
• vue-routerでbeforeEnterとwindow.locationを組み合わせて外部サイトへページ遷移させてみた
• Window.location