VUE 09-3 VUE-CLI&routerプロジェクト補足

14577 ワード
TIL vue テキストリンク

Intro



🔵 App.vue


App.vueで使用されているコードをもう一度説明します.
<template>
  <div id="app">
    <div id="nav">
      <router-link :to="{ name: 'TheLotto'}">TheLotto</router-link>
    </div>
    <router-view/>
  </div>
</template>

<style>
//....
</style>

router-link

index.jsファイルで定義されたパスに登録されている構成部品にマッピングされます.
  • HTML 5ヒストリモードでは、router-linkはクリックイベントをブロックすることによってブラウザがページを再ロードすることを防止する.
  • aタグであるが、我々が知るGET要求を送信するaタグとは異なり、基本GET要求を発行するイベントを削除する形で構成されている.

    • router-view


    routeに一致する構成部品の位置をレンダリングします.
  • 実際のコンポーネントがDOMに付着している位置.router-linkに接続されています.

    • 🔵 その他の機能


    (特定の操作の後)他のコンポーネントに送信


    特定の操作の後、他のコンポーネントを表示できます!
    vueインスタンスでは、$routerを使用してルータインスタンスにアクセスできます->this.$router.pushを試してみましょう.
  • Result.vue
    • の作成
    <template>
  <div>
    <p>당신은 결과를 볼 수 없습니다ㅎㅎ;</p>
  </div>
</template>

<script>
export default {
  name: 'Result',
}
</script>

<style>
</style>
  • result.設定ポイントからvue 
    • TheLotto.vue

//...
methods: {
    getLuckyNums() {
      const numbers = _.range(1,46)
      this.sampleNums = _.sampleSize(numbers,6)

      this.selectedLuckyNums = _.sortBy(this.sampleNums)
      this.$router.push({ name: 'Result' })
    },
  }
  • index.jsによるルーティング
    • の追加
    const routes = [
  
  {
    path: '/lotto',
    name: 'TheLotto',
    component: TheLotto
  },
  {
    path: '/result',
    name: 'Result',
    component: Result
  }
]
    PICK MYで数字をクリックしました...
    結果

    指定したview構成部品への移行を確認できます.
    (追加のデータを伝えるには新しい方法が必要です!-もう一度勉強するつもりです.)

    アドレスウィンドウから転送されたデータの使用-途中で駅を離れる

  • Djangoと同様の可変ルーティング.
  • の場合、アドレスは:から、動的転送データを含む変数の名前を書けばよい.
  • アドレスウィンドウのデータは、$route.paramsを介してアクセスすることができる.
    • 6つの数字でデジタル宝くじを作るのではなく、カスタム数字でデジタル宝くじを作りましょう.
  • index.jsにルーティング
    • を設定する
    const routes = [
  ...
  {
    path: '/lotto/:lottoNum',
    name: 'TheLotto',
    component: TheLotto
  },
]
  • lotto view構成部品を変更!
    • <template>
  <div>
    <h2>로또번호 추천</h2>
    <button @click="getLuckyNums">Pick My Lotto Numbers</button>
    <h2>로또 번호 {{ $route.params.lottoNum }}개 추천</h2>
    <p>오늘의 추천 로또 번호</p>
    <p>{{ selectedLuckyNums }}</p>
  </div>
</template>

<script>
import _ from 'lodash'
export default {
  name: 'TheLotto',
  data: function() {
    return {
      sampleNums: [],
      selectedLuckyNums: [],
    }
  },
  methods: {
    getLuckyNums() {
      const numbers = _.range(1,46)
      this.sampleNums  = _.sampleSize(numbers, this.$route.params.lottoNum)
      //this.sampleNums = _.sampleSize(numbers,6)

      this.selectedLuckyNums = _.sortBy(this.sampleNums)
      // this.$router.push({ name: 'Result' })
    },
  }
}
</script>

<style>
</style>
  • 結果
    • BOJ 7569トマト
    煩わしいタイプ変換