[Vue.js] $router.push()とlocation.href差異

$router.push() VS. location.href

Vue.jsを勉強している間にルーターを勉強しました.
router.jsで必要なパスとコンポーネントを設定し、$router.Push(パス)を実行するとそのパスに移動するというコンセプトはlocationだと思いますhrefに似ているような気がします.
最近までjspでjavascriptを使って画面を開発していましたが、画面を移動するときにlocationを使う必要があります.href=「移動したいパス」で新しい画面に移動したためです.
プレイヤーから見れば、この2つは新しい画面に移動する概念で、この部分ではlocationです.hrefとの違いが気になるので、テストすることにしました.

テストの準備

用意したコードは以下の通りです.

router.js

...
import Detail from './components/Detail.vue';
import Author from './components/Author.vue';
...

const routes = [
  {
    path: "/detail/:id",
    component: Detail,
    children : [
        {
            path : "author",
            component : Author,
        },
    ]
  },
...

Nested Routes機能、/detail/:idの後に作者を追加しました.

Detail.vue

<template>
  <h4>{{ blog[$route.params.id].title }}</h4>
  <p>{{ blog[$route.params.id].content }}</p>
     
  <button type="button" class="btn btn-primary" @click="moveToAuthor">제작자 보기 1</button>
  <button type="button" class="btn btn-primary" @click="$router.push('/detail/'+$route.params.id+'/author')">제작자 보기 2</button>

  <div class="mt-4 mb-4">
    <router-view :blogData="blog[$route.params.id]"></router-view>
  </div>

  <button type="button" class="btn btn-secondary" @click="$router.push('/list')">뒤로가기</button>
</template>

<script>
export default {
    name : 'Detail',
    methods : {
        moveToAuthor : function(){
            const url = window.location.href;

            if(!url.includes("author")){
                // $router.push(url + '/author');   script 태그 내부에서는 $router is not defined
                location.href = url + '/author';
            }
        },
    },
    props : {
        blog : Array,
    }
}
</script>

[作成者ビュー1]ボタンをクリックするとmoveToAuthor関数が呼び出され、現在のURLに「作成者」という言葉がない場合は「/detail/:id/author」としてナビゲートします.hrefメソッドで移動します.

"/詳細/:id/author"パスにDetailが表示されます.Vueに権限を付与します.vueコンポーネントが追加された画面なので、ボタンをダブルクリックしたときに現在のURLの後ろに「/author」を付けて新しいリクエストを送信し続けるのを防ぐために、URLが「author」であるか否かを判断するロジックが追加されました.

「作成者ビュー2」の内容のボタンをクリックし、vueルータのpush機能に移動します.

Author.vue

<template>
    <div>   
      <h5>"{{blogData.title}}"의 제작자 "{{ blogData.author }}"</h5>
      <p>{{blogData.authorContent}}</p>
      <button type="button" class="btn btn-secondary" @click="$router.go(-1)">작가 소개 닫기</button>
    </div>
</template>

<script>
export default {
    name : 'Author',
    props : {
        blogData : Object,
    },
}
</script>

Detail.vueラベルの内部にある作者に入ります.vueの内容です

テスト

2つのボタンを押しても、画面に差はなく、機能は正常に起動しました.
でもよく見るとlocationです.hrefに移動したページ表示アドレスウィンドウの近くに点滅があります.

location.hrefに移動

$router.push()に移動

開発者ツールのネットワークラベルを直感的に開き、もう一度比較します.

location.hrefに移動

$router.push()に移動

$router.push()で移動する方法はシモンズベッドのようです.移動するかどうかにかかわらず、常に一定の状態を維持します.
反対側の位置.hrefは、指定されたURLに新しいリクエストを送信する.
作者もvue内部の「作者紹介を閉じる」ボタンは$router.go(-1)で実現されますが、location.hrefに移動すると、後方に移動すると再び新しいリクエストが発行されます.

テスト後

‘$router.push()をルータとして使用します.jsに登録されたパスは、新しいネットワークリクエストを必要とせずに画面を切り替えることができます.
自分でテストする前に、「vueを使っているので、vueが提供する機能を使うともっと効果的ですか?」私の考えは漠然としていますが、ルータの機能を使って移動する方法がもっと良い理由を自分でテストしました.
排出して見ると、WebもSPA形式が好きなのはなぜかすぐに理解でき、vueのルータを利用して画面を移動する方法がよりスムーズで成熟しているように見えます.
これは、vueを含むフロントエンドフレームワークを使用してSPAの実装を支援することを意味すると思います.