【Vue】Vue Router ～ 基本編 ～

Vue

■ はじめに

https://dk521123.hatenablog.com/entry/2020/12/24/000000

の続き。

Vue Routerで基本的なことを徐々にでるが、メモしておく。

目次

【１】該当しないURLを入力した場合、Not Foundページに飛ばす
【２】各画面遷移前に特定の処理を行いたい（ナビゲーションガード）

データの受け渡しについては、以下の関連記事を参照のこと。

Vue Router ～ パラメータの受け渡し ～
https://dk521123.hatenablog.com/entry/2021/03/02/001653

【１】該当しないURLを入力した場合、Not Foundページに飛ばす

　例えば、http://localhost:8080/<not-support-page>
のように入力すると、真っ白画面が表示されてしまう。

そこで、ユーザ側に明示的に該当ページがないことを伝えるために
こういった場合、Not Foundページに飛ばすことを考える

対策案

* 以下に対応が載っといた。（結構、簡単にできる！）

https://stackoverflow.com/questions/40193634/vue-router-redirect-on-page-not-found-404
やること（大きく分けて2点のみ） 

[1] 「NotFound」ページを新規追加
[2] 「router/index.ts」に対して、pathsディクショナリの末尾に
　　『{ path: '/*', name: 'NotFound', component: NotFound}』を追加

サンプル

/src/views/NotFound.vue (Not Foundページ) 

<template>
  <div>
    <div>Not Found Page</div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

@Component
export default class NotFound extends Vue {
}
</script>

/src/router/index.ts 

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'
//  ・・・略・・・
// ★追加
import NotFound from '../views/NotFound.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  //  ・・・略・・・
  // ★追加
  {
    path: '/*',
    name: 'NotFound',
    component: NotFound
  }
]

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

export default router

【２】各画面遷移前に特定の処理を行いたい（ナビゲーションガード）

* /src/router/index.ts 内の routerインスタンスのメソッド「beforeEach」を実装して
　遷移前のイベントをハンドリングしてあげればいい
* 更に細かくハンドリングできる。詳細は、以下のサイトを参照。

https://qiita.com/SatohJohn/items/cd7067ac64d8e45da4dd

サンプル

/src/router/index.ts 

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

// ★このメソッドを新規追加★
/**
 * global beforeEach.
 * @param to: Route 遷移先のルートオブジェクト
 * @param from: Route 遷移前のルートオブジェクト
 * @param next: Function 
 * 
 */
router.beforeEach((to, from, next) => {
  // ★ここにハンドリンクした処理を書く
  console.log("global beforeEach");
  console.log(`URL : ${to.fullPath}`);
  console.log(`Previous URL : ${from.fullPath}`);
  next();
})

export default router

動作確認 

例えば、
http://localhost:8081/
http://localhost:8081/Hello
と順に遷移した場合は、以下のログが出力される

【ログ】 

global beforeEach
URL : /Hello
Previous URL : /

参考文献

https://router.vuejs.org/ja/guide/advanced/navigation-guards.html

関連記事

Vue ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/04/30/000000
Vue Router ～ 入門編 ～
https://dk521123.hatenablog.com/entry/2020/12/24/000000
Vue Router ～ パラメータの受け渡し ～
https://dk521123.hatenablog.com/entry/2021/03/02/001653