10/13

*Vueインフラストラクチャコースの復習

- ref : https://www.inflearn.com/course/vuejs/

*Vue-Router動的ルーティングマッチング

コード例

{ path: '/user/:id', component: User }

同じモード(例えば/user/foo、/user/bar)に従って同じ素子を再使用し、一致するid値に基づいてデータを受信し、情報を変更する必要がある場合に使用します.
=>要約:同じ構成部品を繰り返し使用し、セグメントに基づいてデータを動的に変更する必要がある場合に使用します.

ここでidはダイナミックセグメントと呼ばれ、ダイナミックセグメントは常に「コロン」で始まる必要があります.

動的セグメント(id)の値は、this.$route.paramsによって取得することができる.

/user/bar=>/user/fooに直接移動すると、同じ構成部品が再使用されるため、Vueのライフサイクルフックは続行されません.
この場合、「watch」検出$route変更によりid値の変化を検出できます.

*Vueネストルーティング

ネストされたルーティング:ルーティングによって別の構成部品を構成部品サブアイテムにマッチングします.

ソースの例

routes: [
    { path: '/user/:id', component: User,
      children: [
        {
          // /user/:id/profile 과 일치 할 때
          // UserProfile은 User의 <router-view> 내에 렌더링 됩니다.
          path: 'profile',
          component: UserProfile
        },
        {
          // /user/:id/posts 과 일치 할 때
          // UserPosts가 User의 <router-view> 내에 렌더링 됩니다.
          path: 'posts',
          component: UserPosts
        }
      ]
    }
  ]

本プロジェクトでは、カード要素を/b/:bid/c/:cidの形でプレート要素内に重ねます.
=>Boardでレンダーされたリストをクリックしてカード要素をレンダーし、ネストされたルートを使用してBoard要素の上にあるモデルウィンドウに配置するためです.
=>Board Component内に<router-view></router-view>が作成された場合、ルーティングに従ってCardコンポーネントが一致します.

を使用してルーティングをネストするときに発生するエラー

//Card.vue
watch: {
	//1. 정상 동작
        $route(to, from) {
            this.cid = to.params.cid;
        },
        //2. 에러 발생
        $route : (to, from) => {
          this.cid = to.params.cid;
        }
},

ボードでrouter-linkをクリックし、アドレスを/b/1/c/1=>/b/1/c/2に変更します.
このとき、Cardコンポーネントが$routeの変更を検出しない場合、コンポーネントは再使用され、ライフサイクルフックがないため、変更されたcid値は検出されません.

したがって、Watchを使用して$routeの変更を検出します.

1番と2番の決定的な違い:1番の場合、thisはVm(Vueインスタンス)ですが、2番の場合、Arow Fengが使用され、thisはVmに一致しません.そのためcidプログラムが見つからず、エラーが発生しました.
=>アロエ乳液を使うのが原因!
=>正確には、Arow Fengにはthisの値がないので、親コンテキストのthisを使用します.

Home.vueデータの読み込み

ストリーム:構成部品に表示するデータを宣言します=>api呼び出し関数=>
ライフサイクルフックで関数(データのインポート)=>データの変更を呼び出すと、ビューに=>構成部品が再表示されます.

更新時、token値がホームであっても.vueコンポーネントからapiを呼び出せないエラー

//@/store/index.js
//store 객체를 import 한 모든 곳에서 store를 사용할 수 있다.
const store = new Vuex.Store({});


if (sessionStorage.getItem("token")) {
    const token = JSON.parse(sessionStorage.getItem("token"));
    store.commit("LOGIN", token);
}

Storeオブジェクトを設定すると、セッションメモリにトークン値がある場合、axios configはBERRORTOKER値を設定します.

問題原因

のリフレッシュ時にトークン値をAxios configに設定する関数が見つかりません.

登録

で受け取ったtoken値JSON.stringfiy()でsessionStorageを設定し、インポート時にJSON.値はparse()で変更されていないため、api呼び出し時にUnautorzedエラーが発生しました.

Reference

Vue動的ルーティングマッチング:https://router.vuejs.org/kr/guide/essentials/dynamic-matching.html2

Vueネストルーティング:https://router.vuejs.org/kr/guide/essentials/nested-routes.html2

Vueルーティング:https://jeonghwan-kim.github.io/2018/04/07/vue-router.html2