질문있습니다!

두가지 질문있습니다

1. 현재 페이지가 a/b/3이고 a/b/5 페이지로 이동하고싶을 때, 즉 같은 컴포넌트 내에서 params 값만 바꾸어서 페이지를 변경하고 싶을땐 어떻게 해야되나요??

해당 페이지에서 this.$router.push나 replace로 params만 변경했더니 navigation duplicated 에러가 발생하거나 console에 특정 변수들을 찍어보면 이전 페이지에 대한 데이터 역시 같이 찍히게 됩니다.

  mounted () {
    document.addEventListener('keypress', (e) => { if (e.keyCode === 97) { this.console(); } });
}

(위와 같이 a버튼을 눌럿을 때, 콘솔에 찍히게 만들었는데 이때 이전 페이지에 있던 내용 역시 같이 찍히게 됩니다.)

사용한 함수는 아래입니다. (_randomKey가 있든 없든 제대로 동작하지 않습니다..)

nexts () {
      return this.$router.replace({ name: 'Components', params: { id: this.next }, _randomKey: Date.now() }).catch(err => console.log(err));
   }

vue-route 공식문서에는 같은 컴포넌트 내에서 params만 바뀔땐 beforeRouteUpdate를 사용하라는 것을 보았는데, 단순하게

    beforeRouteUpdate (to, from, next) {
      console.log(to);
      console.log(from);
   }

위처럼만 해도 console에 찍히지가 않아서 이걸 쓰는게 맞는건지 잘 모르겠습니다..

어떤 방법으로 해결해야 될까요??

2. 어떤 태그 하나에 대해서 클릭과 키 프레스 이벤트를 동시에 실행하고 싶은데

<v-btn @click="a" @keypress.enter="b">

로 했더니 keypress에 대한 이벤트가 동작하지 않습니다.

이럴땐 document.addEventListener를 이용하는 방법밖엔 없는건가요??

안녕하세요 ㅁㄴㅇㄼㅈㄷㄱ님,

답변이 늦어져서 죄송합니다 :)

1. 페이지 URL 정보가 바뀌면 라우터의 네비게이션 가드 또는 컴포넌트 내의 watch: { $route() {} } 코드를 이용하여 변화를 감지한 후 로직을 실행하실 수 있을 겁니다. keypress 이벤트가 남아 있는 부분은 페이지를 이동하기 전에 이벤트 리스너를 제대로 제거 했는지 한번 확인해 주시면 좋을 것 같아요.

2. 뷰 디렉티브를 이용한 이벤트 제어는 아래와 같이 여러개도 가능합니다.

다만, 위의 예시로 든 버튼 요소에는 Vue.js를 떠나서 기본적으로 키보드 이벤트를 제어하지 못할 것 같습니다. 브라우저 입장에서는 인풋 요소에만 키보드 이벤트를 받을 수 있게끔 설계된 것으로 알고 있으니 HTML 요소 별로 어떤 이벤트를 사용할 수 있는지 먼저 확인해 보시면 좋을 것 같습니다 :)

수강해 주셔서 감사합니다

인프런 커뮤니티 질문&답변