Vue CLI を使用したブラウザの更新を禁止または更新した際の処理分岐

Question

前提・実現したいこと

Vue CLIをしてブラウザの更新(F5、ctrl + r、右クリック + 再読み込み等)を禁止するまたは、再読み込みした際に処理を分岐させたいのですが、上手くいきません。一応後者の再読み込み時に処理を分岐させる方法については、下記の方法でできるのですが非推奨のため行いたくありません。何か良い方法はあるでしょうか・・・できれば更新禁止が良いです。

###非推奨コード：Hello.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    {{message}}
  </div>
</template>

<script>

export default {
  data(){
    return {
      message:"Hello"
    };
  },
  mounted : function(){
    console.log('mounted')
    if(window.performance){
      if(performance.navigation.type === 1){
        console.log("リロードされた");
        // 更新時の処理
      }else{
        console.log("リロードされていない");
        // 画面遷移時の処理
      }
    }
  }
}
</script>

document.addEventListnerでF5等が押下されたら無効化するみたいなことができればよいのですがVueでキーボード入力されたらイベントを発生させる方法がわかればいいんですが・・・。

一応、キーイベントの取得だけなら下記で取得できるのですが、テキストボックスやなんらかのボタンでイベントを起こさないといけないのであまり意味がないんですよね。

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    {{message}}
    <input tyoe="text" v-on:keydown="onKeyDown">//追加
  </div>
</template>

<script>

export default {
  data(){
    return {
      message:"Hello"
    };
  },
  mounted : function(){
    console.log('mounted')
    if(window.performance){
      if(performance.navigation.type === 1){
        console.log("リロードされた");
      }else{
        console.log("リロードされていない");
      }
    }
  },
  methods:{//追加
    onKeyDown:function(e){
      console.log(e.key+"キーが押された");
    }
  }
}
</script>

ちなみに以下手順で同様のプロジェクトを作成できると思います。
###プロジェクト作成手順

1:vue create heloworld (コマンド)
2:Manually select features (選択)
3:以下*選択
 (*) Choose Vue version
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support        
 (*) Router
 ( ) Vuex
 ( ) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing
4:以下選択または入力
? Please pick a preset: Manually select features
? Check the features needed for your project: Choose Vue version, Babel, Router, Linter
? Choose a version of Vue.js that you want to start the project with 3.x
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: Lint on save
? Where do you prefer placing config for Babel, ESLint, etc.? In package.json
? Save this as a preset for future projects? Yes
? Save preset as: test
5:プロジェクト作成後viewsフォルダー配下にHello.vueを作成
6:routerフォルダ配下のindex.jsを修正

###修正ソース：index.js

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },{// 追加
    path: '/hello',
    name: 'Hello',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/Hello.vue')
  }// 追加
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router

補足情報（FW/ツールのバージョンなど）

Node.js v14.17.5
Vue @vue/cli 4.5.13

非推奨は以下のものに変わっていただけでした。

performance.getEntriesByType("navigation")[0].type;

Answer 1

非推奨の修正方法

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
    {{message}}
  </div>
</template>

<script>

export default {
  data(){
    return {
      message:"Hello"
    };
  },
  mounted : function(){
    console.log('mounted')
    const type = performance.getEntriesByType("navigation")[0].type;
    console.log("type:"+type);
    if(type==="reload"){
      console.log("リロードされた");
    }else{
      console.log("リロードされていない");
    }
  }
}
</script>