20240711_vue_router_method

함수를 호출하는 객체가 있는 경우 메소드,

함수를 호출하는 객체가 없는 경우 함수 ?!

!?

* 함수

  특정 작업을 수행하기 위해 설계된 기능

  직접 호출 할 수 있음

  재사용 가능함

  자체적으로 존재함

* 메소드

  객체의 프로퍼티가 함수인 경우

  점 표기법 또는 대괄호 표기법 사용하여 호출

  함수에 비해 재사용하기 어렵다

  메소드는 객체와 연결되어 있다

 

>> https://developer-talk.tistory.com/534

[JavaScript]함수와 메서드(Function and Method)

---

 

https://v3.router.vuejs.org/kr/

Vue Router

 

App.vue > RouterLink, RouterView

router/index.js > settings, mapping

views > components 와 기능적으로 다르지 않음, 단순 분류, component와 구분하기 위해 View로 끝나도록 네이밍

 

* mapping

 1. path > RouterLink to="{path}"

 2. name > RouterLink :to="{ name: '{name}' }"

 3. param (표기 : 콜론, ex) "/usr/:id") > RouterLink :to="{ name: 'user', params: {id:1}}"

  >> 컴포넌트에서 $route.params 로 참조 가능 ( ex. $route.params.id )

  >> composition API 방식 추천 : useRoute(), ref(route.params.id)

 4. navigation > function() { router.push({ name: 'home' }); } > button @click="{functionName}"

  >> 인자전달 가능

  >> router.push({ path: '/menu1/sub1' })  / push({ name: '/submenu1', params: { id: '1'} }) / push({ path: '/submenu1', query: { plan: 'private'} })

 

https://winterflower.tistory.com/454

[Vue3] Vue Router로 페이지 이동하기

---

 

아!?