그냥

AAA.vue eslint 에러 발생

 > 'XX' is defined but never used

* 해결

아래 주석을 해당 라인에 추가

// eslint-disable-line no-unused-vars

onBeforeRouteLeave : 사용자가 현재 view 를 떠날 시 수행

ex)

import { onBeforeRouteLeave } from 'vue-router';

onBeforeRouteLeave(() => {
  const answer = window.confirm('떠남?');
  if (answer === false) {
    return false;
  }
});

==, ===

변수 타입에 상관없이 값이 같은 경우 >> '=='

변수 타입과 값, 모두 같은 변수 비교시 >> '==='

router.push({
  name: 'About',
  state: {
    one: 1,
    two: 2
  }
});

>>

  const { one } = history.state;
  const { two } = history.state;
  console.log('one = ' + one);
  console.log('two = ' + two);

https://vuetifyjs.com/

* 환경변수 확인을 위하여 소스 추가 > App.vue

export default {
  created() {
    console.log(process.env);
  }
}

* 콘솔 로그 확인

* 모드 추가 > package.json

"scripts": {
  "test": "vue-cli-service serve --mode test"
}

* 새로운 환경변수 파일 추가 > {project root}/.env.{mode name} (ex. .env.test)

NODE_ENV = "test"
BASE_URL = "/"
VUE_APP_NAME = "test"
VUE_APP_PORT = 8080

* 생성/추가한 모드로 실행

* 포트 변경 > vue.config,js

module.exports = {
  devServer: {
    port: process.env.VUE_APP_PORT
  }
}

* .env 파일들은 프로젝트 루트 경로에 위치해야 한다

* 새로운 환경변수명은 VUE_APP_ 으로 시작해야 인식 및 사용 가능해진다.

* 참고:

https://velog.io/@skyepodium/vue-%EC%8B%A4%ED%96%89-%EB%AA%A8%EB%93%9C%EC%99%80-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98-%EC%84%A4%EC%A0%95

ㅁㅁ

ㅁㅁ

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

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

!?

* 함수

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

  직접 호출 할 수 있음

  재사용 가능함

  자체적으로 존재함

* 메소드

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

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

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

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

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

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

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

아!?