𝐓𝐨𝐝𝐚𝐲 𝐈 𝐋𝐞𝐚𝐫𝐧 2022.05.10.화

Today I Learn 220510

어제 만들었던 과제에서 사실 /lotto/6으로 넘어가지 않는 오류가 있어서 path를 '/lotto/6'으로 지정해서 해결했는데, 오늘 왜 넘어가지 않았는지 발견하였다..!

역시나 휴먼에러였고 params를 parmas라고 적어서 생긴 오류였다....!!

 

또 로또 페이지에서 숫자 6개를 뽑는 함수에서 this.$router.params.lottoNum이라 적어서 오류가 생겼었다!!! this.$route.params.lottoNum으로 해야 하는데,

lunch페이지에서 lotto페이지로 넘어갈 때 this.$router.push라고 적어서 route와 router가 헷갈렸다!

 

 

왜 lunch페이지에서는 다른 URL로 이동하려면 this.$router.push라 쓰는 걸까?

• 이 메서드는 를 클릭할 때 내부적으로 호출되는 메서드와 같기 때문에 this.$router.push()로 호출해야 한다. --전체 
• 반면 lotto페이지에서는 route이기 때문에 this.$route.params로 호출하는 것이다!! -- 현재 페이지의 params

그래서 어제의 코드는 다음과 같이 변화되었다.

/router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import LunchView from '../views/LunchView.vue'
import LottoView from '../views/LottoView.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/lunch',
    name: 'lunch',
    component: LunchView
  },
  {
    path: '/lotto/:lottoNum',
    name: 'lotto',
    component:LottoView

  }
]

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

export default router

App.vue

<template>
  <div id="app">
    <nav>
      <router-link :to="{name: 'lunch'}">Lunch</router-link> |
      <router-link :to="{name: 'lotto',params:{ lottoNum:6 } }">Lotto</router-link>
    </nav>
    <router-view/>
  </div>
</template>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

nav {
  padding: 30px;
}

nav a {
  font-weight: bold;
  color: #2c3e50;
}

nav a.router-link-exact-active {
  color: #42b983;
}
</style>

/views/LottoView.vue

<template>
  <div>
    <h1>로또</h1>
    <button @click="getLuckyNums">Get Lucky Numbers</button>
    <p>{{ selectedLuckyNums }}</p>
  </div>
</template>

<script>
import _ from 'lodash'

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

<style>

</style>

/views/LunchView.vue

<template>
  <div>
    <h1>점심메뉴</h1>
    <button @click="pickLunch">Pick Lunch</button>
    <p>{{ selectedLunchMenu }}</p>
    <br>
    <hr>
    <h1>로또를 뽑아보자</h1>
    <button @click="moveToLotto">Pick Lotto</button>
  </div>
</template>

<script>
import _ from 'lodash'

export default {
  name: 'LunchView',
  data: function(){
    return { selectedLunchMenu:''} 
  },
  methods: {
    moveToLotto() {
      this.$router.push({ name: 'lotto', params:{lottoNum:6}})
    },
    pickLunch() {
      this.selectedLunchMenu= _.sample(['피자','치킨','삼겹살','꿔바로우','탄탄면','라멘','연어초밥','막국수'])
    }
  }
}
</script>

<style>

</style>